定义和用法
-
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
（注意：轮廓不占据空间，也不一定是矩形） - 可以按顺序定义以下属性：
outline-color: color;
outline-style: solid; /** solid dotted dashed double ... **/
outline-width: 2px;
或
outline: width style color;
问题
无法定义圆角，如图：
Paste_Image.png
解决方法
- 在FiewFox中可以使用
outline-radius实现圆角轮廓，由于是firefox的私有属性，使用是需要加上-moz-前缀，即
div {
border: 2px solid #333;
border-radius: 20px;
outline: 3px solid #6099f4;
-moz-outline-radius: 23px;
}
Firefox:
Firefox 浏览器效果
Chome:
Chome 浏览器效果
- 可以使用
box-shadow达到同样的效果，box-shadow缩写范例如下：
box-shadow: 水平偏移 垂直偏移 模糊范围 扩展宽度 颜色;
添加如下样式：
div {
margin: 100px auto;
width: 200px;
height: 130px;
border: 2px solid #333;
border-radius: 20px;
box-shadow: 0 0 0 3px #6099f4;
}
Chome 上实现效果：
Chome 浏览器效果
