【CSS3】CSS3外轮廓属性
2016-02-26 01:01
411 查看
外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现。
outline属性早在CSS2中就出现了,主要是用来在元素周围绘制一条轮廓线,可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持,在CSS3中对outline作了一定的扩展,在以前的基础上增加新特性。outline属性的基本语法如下:
从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style,而outline-width相当于border-width,只不过CSS3给outline属性增加了一个
w3c中的定义:
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同:
轮廓不占用空间
轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。
CSS 代码如下:
规定边框边缘之外 15 像素处的轮廓:
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效果。 |
CSS3 Outline Offset
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。轮廓与边框有两点不同:
轮廓不占用空间
轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。
CSS 代码如下:
实例
规定边框边缘之外 15 像素处的轮廓:div { border:2px solid black; outline:2px solid red; outline-offset:15px; }
相关文章推荐
- 【CSS3】自由缩放属性resize
- css 透明度
- css 效果收集
- 2016/2/25 html+css学习资源
- CSS定位属性Position详解
- CSS:在input、pre中左边加上一个图标(一行和多行)
- 史上最全的CSS hack方式一览
- HTML+CSS慕课网学习总结(四)
- 理解CSS前景色和透明度
- CSS水平/垂直居中方法一览
- 导航条div+css实现
- CSS学习
- 一些常用css技巧的为什么(二)我所理解的line-height
- 详解css3中webkit-animation
- CSS属性选择器
- HTML+CSS 整站 步骤
- CSS动画@-webkit-keyframes
- [CSS学习笔记001] CSS Reset
- 用CSS3特性直接绘图,半圆角,三角形,圆形等
- 页面定制CSS代码初探(一):页面变宽 文本自动换行 图片按比缩放