outline的中文意思是轮廓线。
是绘制于元素周围的一条线,位于边框(border)边缘的外围,
轮廓线不会占据空间,也不一定是矩形。
outline: color style width; /* 简写方式 */
outline-color: #ff6700; /* 分开写 */
outline-style: dashed;
outline-width: 5px;
CSS2的属性,所有浏览器都支持 outline 属性。如果规定了 !DOCTYPE,则 IE8 支持 outline 属性。
这个样式被用在 button和input等一些元素的默认样式中,很多时候都是不需要这个默认样式的。这也是一个很容易让人遗忘的样式。(我大概忘记它5、6次了吧,刚好用到就顺便记下来了)
outline-color
控制轮廓颜色
值 | 描述 |
---|---|
color_name | 规定颜色值为颜色名称的轮廓颜色 |
hex_number | 规定颜色值为十六进制值的轮廓颜色(比如 #ff0000)。 |
rgb_number | 规定颜色值为 rgb 代码的轮廓颜色(比如 rgb(255,0,0))。 |
invert | 默认。执行颜色反转(逆向的颜色)。可使轮廓在不同的背景颜色中都是可见。 |
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 值。 |
outline-width
控制轮廓线宽(不是线长)
值 | 描述 |
---|---|
thin | 规定细轮廓。 |
medium | 默认。规定中等的轮廓。 |
thick | 规定粗的轮廓。 |
length | 允许您规定轮廓粗细的值。 |
inherit | 规定应该从父元素继承轮廓宽度的设置。 |
demo
<style>
.box{
width: 50px;
height: 50px;
margin: 200px auto;
outline:#ff6700 dashed 5px;
border: #000 solid 5px;
}
</style>
<div class="box"></div>
效果: