个性化阅读
专注于IT技术分析

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及以上浏览器 */
}
赞(0)
未经允许不得转载:srcmini » css轮廓outline属性和样式 – CSS高级教程
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!