CSS outline（轮廓线）

2019年9月11日 246次阅读 来源: ci0n

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>

效果：

《CSS outline（轮廓线）》

    原文作者：ci0n
    原文地址: https://segmentfault.com/a/1190000010756023
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞