outline属性

outline(轮廓)用于设置元素周围的一条线,用于元素边框的外围,可起到突出元素的作用。

outline属性所有浏览器都支持,如果规定了 !DOCTYPE,则 IE8 支持 outline 属性。

outline属性不会占用空间,也不一定是矩形。

outline的值的顺序:outline:outline-color,outline-style,outline-width;请始终在outline-color之前设置outline-style,元素只有先获得轮廓才能设置他的颜色。当设置为none时,则不显示轮廓线。

1、outline-color:invert(默认,执行颜色反转(逆向的颜色)。可使轮廓在不同的背景颜色中都是可见。)|颜色名称(red)|十六进制(#fff)|rgb(rgb(255,0,0))|inherit;

2、outline-style:值如下:

描述
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit 规定应该从父元素继承轮廓样式的设置。

效果如下:

3.outline-width:

值描述thin规定细轮廓。medium默认。规定中等的轮廓。thick规定粗的轮廓。length允许您规定轮廓粗细的值(如5px)。inherit规定应该从父元素继承轮廓宽度的设置。

时间: 2024-10-14 05:37:35

outline属性的相关文章

input text的outline属性

普通的text选中编辑时会出现蓝色的边框,感觉不太美观,怎么去掉呢? 可以在text对应的样式里加入:outline: 0; input text的outline属性

530,css outline属性

outline:none,是什么意思呢 outline-style属性用于设置整个轮廓的样式.样式不能是none,否则轮廓不会出现. outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可以起到突出元素的作用.outline属性设置元素周围的轮廓线. (请始终在outline-color属性之前声明outline-style属性,元素只有获得轮廓后才可以改变其轮廓的颜色: 轮廓线不会占据空间,也不一定是矩形: 默认值:none:) 设置轮廓的样式 p{ outline-style

css3之outline属性

在看张鑫旭前辈的css3相关文章时候,看到一个用css样式实现一个“+”加号效果 http://www.zhangxinxu.com/wordpress/2015/04/css3-radius-outline/ 这里面接触到一个新的css3属性,outline,翻译成中文就是——"轮廓"; 语法:outline:outlineWidth outlineStyle outlineColor; 例如:outline:5px solid blue; 而且据我测试,这里的5px,solid,b

a:focus{outline: none;} 如何去掉点击链接时周围的虚线框outline属性

1. CSS方式 在IE下是使用html属性:hideFoucs,在HTML标签中加上hidefocus=”true”属性即可,但这个属性是IE私有的,Firefox是不认的. 加了hidefocus属性 IE中用CSS处理的方式为: a{noOutline:expression_r(this.onFocus=this.blur());} Firefox的处理方法比较符合标准,只需要在样式里设置a:focus{outline:none}皆可: a:focus{outline:none} MSIE

CSS 轮廓---outline属性

http://www.w3school.com.cn/css/css_outline.asp

outline和outline-offset属性实现简单的缝边效果

如果现在有个需求,让你实现下面的样式,你会怎么做呢? 我首先想到的是用 border + box-shadow 实现,代码如下 div { margin: 50px auto; width: 200px; height: 100px; background: #655; border-radius: 5px; border: 1px dashed #fff; box-shadow: 0 0 0 10px #655; }   当时,我个人认为没有其它方法可以实现了,直到后面在<css揭秘>一书当

outline与border的区别

在浏览器里,当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候,该元素将会被一个轮廓虚线框围绕.这个轮廓虚线框就是 outline . outline 能告诉用户那一个可以激发事件的html元素获取了焦点,对钟爱键盘操作的用户尤其有意义.一个清晰悦目的outline设计能提高使用表单的用户体验. 另一方面,outline 也有些讨厌的地方,比如使用CSS设计的Tab(标签页)时,选择一个Tab之后,Tab上的轮廓虚线会一直显示,有些影响美观. CSS 的 outline 属性允许

css3的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

CSS outline:none;是什么意思???

定义和用法outline-style 属性用于设置元素的整个轮廓的样式.样式不能是 none,否则轮廓不会出现. outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用.outline 属性设置元素周围的轮廓线. 注释:请始终在 outline-color 属性之前声明 outline-style 属性.元素只有获得轮廓以后才能改变其轮廓的颜色. 注释:轮廓线不会占据空间,也不一定是矩形. 默认值: none 设置轮廓的样式:p { outline-style