CSS Outline(轮廓)
(outline)轮廓线是在元素(例如按钮,活动表单域等)的边框边缘外部绘制的一条线,以使其突出。
轮廓(Outline) VS 边框(Border)
轮廓通常用于突出显示元素。轮廓一眼看上去与边框非常相似,但在以下方面与边框有所不同:轮廓不占用空间,因为它们始终放置在元素框的顶部,这可能导致它们与页面上的其他元素重叠。
与边框不同,轮廓不允许我们将每个边缘设置为不同的宽度,也不能为每个边缘设置不同的颜色和样式。轮廓在所有方面都是相同的。
轮廓除了重叠之外,对周围的元素没有任何影响。
与边框不同,轮廓不会更改元素的大小或位置。
轮廓可能不是矩形的。
注意:如果将轮廓放在元素上,则它将在网页上占用相同的空间,就好像您对该元素没有轮廓一样。
outline-width 轮廓宽度属性
outline-width属性指定要添加到元素上的轮廓的宽度。它的值应该是一个CSS长度(px,pt,em等)或允许的关键字之一,但百分比或负值是不允许的。就像border-width财产一样。
示例p {
outline-width: thick;
}测试看看‹/›
注意:如果outline-width缺少或未指定的值,则将使用的默认值(medium)代替。
outline-style 轮廓样式的属性
该outline-style属性设置样式轮廓,如:solid,dotted等等。
该属性可采取以下值之一:none,hidden,dashed,dotted,double,groove,inset,outset,ridge和solid。就像border-style值一样。
none: 没有定义轮廓。
hidden: 定义隐藏的轮廓。
dotted: 定义虚线轮廓
dashed: 定义虚线轮廓
solid: 定义一个坚实的轮廓
double:定义两个轮廓。两个轮廓的宽度与轮廓宽度值相同
groove:定义3D沟槽轮廓。效果取决于轮廓颜色值
ridge:定义3D脊形轮廓。效果取决于轮廓颜色值
inset:定义3D插入轮廓。效果取决于轮廓颜色值
outset:定义3D起始轮廓。效果取决于轮廓颜色值
示例p {
outline-style: double;
}测试看看‹/›
outline-color 轮廓颜色属性
outline-color属性设置轮廓的颜色。
示例p {
outline-style: solid;
outline-color: #0000ff;
}测试看看‹/›
您也可以将设置outline-color为transparent。
注意:outline-color如果单独使用该属性,则该属性将不起作用。使用outline-style属性首先设置轮廓。
轮廓速记属性
CSS outline属性是设置一个或多个单独的轮廓属性的速记简写属性outline-style,outline-width并outline-color在一个单一的规则。
示例p {
outline: 5px solid #9acd32;
}测试看看‹/›
如果在设置轮廓速记属性时忽略或未指定单个轮廓属性的值,outline则将使用该属性的默认值(如果有的话)。
注意:outline-color在设置元素的轮廓时,如果缺少属性值或未指定属性值(例如outline: 5px solid;),则该元素的color属性将用作的值outline-color。
在下面的示例中,轮廓将为宽度为5px的黑色实线:
示例p {
color: black;
outline: 5px solid;
}测试看看‹/›
但是,在情况下outline-style,省略该值将不会显示任何轮廓,因为outline-styleproperty 的默认值为none。
在下面的示例中,将没有轮廓:
示例p {
outline: 5px #00ff00;
}测试看看‹/›
警告: Internet Explorer 7和更早版本不支持该outline属性。IE8 outline仅在指定a的情况下才支持该属性。
删除活动链接周围的虚线
该outline属性被广泛用于删除活动链接周围的虚线。
示例a, a:acive, a:focus {
outline: none; /* Works in Firefox, Chrome, IE8 and above */
}测试看看‹/›