css轮廓outline属性和样式 – CSS高级教程

上一章CSS高级教程请查看：css边框属性border

Outline轮廓是在元素(如按钮、活动表单字段等)的边框外绘制的一条线，用于突出这些元素。

轮廓与边界

轮廓通常用于突出显示元素，一个粗略的轮廓看起来很像边界，但它与边界的区别如下：

• 轮廓不占用空间，因为它们总是放在元素的方框顶部，这可能导致它们与页面上的其他元素重叠。
• 与边框不同的是，轮廓不允许我们将每条边设置为不同的宽度，或为每条边设置不同的颜色和样式。所有的轮廓都是一样的。
• 除了重叠之外，轮廓对周围的元素没有任何影响。
• 与边框不同，轮廓不会改变元素的大小或位置。
• 轮廓线可以是非矩形的。

注意：如果你在一个元素上放了一个轮廓，它在web页面上所占的空间和你在这个元素上没有轮廓所占的空间是一样的。

outline-width属性

outline-width属性指定要添加到元素上的轮廓的宽度。它的值应该是，一个CSS长度(px, pt, em，等等)或一个允许的关键字，但百分比或负值是不允许的，就像border-width属性一样。

p {
    outline-width: thick;
}

注意：如果缺少或未指定outline-width的值，则将使用outline-width的默认值(媒介)。

outline-style属性

outline-style属性设置轮廓的样式，如：solid, dotted等。

此属性可以取下列值之一：none, hidden, dashed, dotted, double, groove, inset, outset, ridge and solid，就像边界的属性border-style。

• none: 不定义轮廓。
• hidden: 定义隐藏的轮廓。
• dotted: 定义虚线轮廓
• dashed: 定义虚线轮廓
• solid: 定义实体轮廓
• double: 定义两个轮廓。两个轮廓线的宽度与轮廓线宽度值相同
• groove: 定义3D凹槽轮廓。效果取决于轮廓线颜色值
• ridge: 定义一个3D的脊状轮廓。效果取决于轮廓线颜色值
• inset: 定义一个3D inset轮廓。效果取决于轮廓线颜色值
• outset: 定义一个3D开始的轮廓。效果取决于轮廓线颜色值

p {
    outline-style: double;
}

outline-color属性

outline-color属性设置轮廓的颜色。

p {
    outline-style: solid;
    outline-color: #0000ff;
}

你还可以将轮廓颜色设置为透明。

注意：如果单独使用outline-color属性，它将不起作用。首先使用轮廓样式属性设置轮廓。

轮廓速记属性

outline CSS属性是一个简写属性，用于在单个规则中设置一个或多个单独的outline属性outline-style、outline-width和outline-color。

p {
    outline: 5px solid #9acd32;
}

如果在设置outline速记属性时省略或未指定某个outline属性的值，则将使用该属性的默认值(如果有的话)。

注意：如果在设置元素的轮廓(例如:outline: 5px solid;)时，缺少或未指定轮廓颜色属性的值，则将使用元素的color属性作为轮廓颜色的值。

在下面的例子中，轮廓线是一条5px宽的实线：

p {
    color: black;
    outline: 5px solid;
}

但是，对于outline-style，省略该值将导致根本不显示轮廓，因为outline-style属性的默认值是none。

在下面的例子中，没有轮廓：

p {
    outline: 5px #00ff00;
}

警告：Internet Explorer 7和早期版本不支持outline属性。IE8只有在<!DOCTYPE >指定。

删除激活链接周围的虚线

轮廓属性广泛用于删除活动链接周围的虚线。

a, a:acive, a:focus {
    outline: none; /* 适用于Firefox、Chrome、IE8及以上浏览器 */
}