70. CSS3 CSS3外轮廓outline属性
外轮廓outline在页面中呈现的效果和边框border
呈现的效果极其相似,但和元素边框border
完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现。
outline
属性早在CSS2中就出现了,主要是用来在元素周围绘制一条轮廓线,可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持,在CSS3中对outline
作了一定的扩展,在以前的基础上增加新特性。
outline属性的基本语法如下:
outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit
从语法中可以看出outline
和border
边框属性的使用方法极其类似。outline-color
相当于border-color
、outline-style
相当于border-style
,而outline-width
相当于border-width
,只不过CSS3给outline
属性增加了一个outline-offset
属性,其取值说明如下。
属性值 | 属性值说明 |
outline-color |
定义轮廓线的颜色,属性值为CSS中定义的颜色值。在实际应用中,可以将此参数省略,省略时此参数的默认值为黑色。 |
outline-style |
定义轮廓线的样式,属性为CSS中定义线的样式。在实际应用中,可以将此参数省略,省略时此参数的默认值为none,省略后不对该轮廓线进行任何绘制。 |
outline-width |
定义轮廓线的宽度,属性值可以为一个宽度值。在实际应用中,可以将此参数省略,省略时此参数的默认值为medium,表示绘制中等宽度的轮廓线。 |
outline-offset |
定义轮廓边框的偏移位置的数值,此值可以取负数值。当此参数的值为正数值,表示轮廓边框向外偏离多少个像素;当此参数的值为负数值,表示轮廓边框向内偏移多少个像素。 |
inherit |
元素继承父元素的outline 效果。 |
例如:
我们制作双色边框效果。
HTML代码:
<div></div>
CSS代码:
div { padding: 20px; margin: 30px; outline: red solid 2px; border: 2px solid green; }
效果如下:
声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 70. CSS3 CSS3外轮廓outline属性
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 70. CSS3 CSS3外轮廓outline属性