outline：[outline-color] || [outline-style] || [outline-width] || [outline-offset] | inherit
相关属性：outline-style , outline-width, outline-offset ,outline-color
css outline 元素边框设置【CSS3.0参考手册】
css outline设置元素边框效果，可以简单展示相框效果，可以展示html元素边框的立体效果。3D轮廓
语法：
取值：
- <outline-color>：
- 指定轮廓边框颜色。
- <outline-style>：
- 指定轮廓边框轮廓。
- <outline-width>：
- 指定轮廓边框宽度。
- <outline-offset>：
- 指定轮廓边框偏移位置的数值。
- inherit：
- 默认。
说明：
- outline （轮廓）是给元素周围绘制轮廓外边框，通过设置一个数值使边框边缘的外围偏移，可起到突出元素的作用。
- outline 属性可设置元素周围的轮廓线。
- 轮廓线不会占据空间，也不一定是矩形。
- outline 属性是一个简写属性，用于设置元素周围的轮廓线。
兼容性：
| 类型 | Internet Explorer | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| 版本 | (×)IE6 | (√)Firefox 3.0.10 | (√)Chrome 2.0.x | (√)Opera 9.64 | (√)Safari 4 |
| (×)IE7 | (√)Firefox 3.5 | ||||
| (√)IE8 | |||||
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css outline 元素边框设置</title>
</head>
<body>
<div style="width: 160px;padding: 10px;height: 30px;border: 2px solid black;outline-color:#81F135;outline-style:groove;outline-width:2px;outline-offset: 5px;">这绘制的是一个轮廓边框</div>
</body>
</html>
outline-width
取值：
- thin：
- 定义细轮廓。
- medium：
- 默认。定义中等的轮廓。
- thick：
- 定义粗的轮廓。
- <length> ：
- 定义轮廓粗细的值。
说明：
outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值
outline-style
取值：
- none：
- 默认值。定义无轮廓。
- dotted：
- 定义一个点状的轮廓。
- dashed：
- 定义一个虚线轮廓。
- solid：
- 定义一个实线轮廓。
- double：
- 定义一个双线轮廓。双线的宽度等同于outline-width的值。
- groove：
- 定义一个3D凹槽轮廓。此效果取决于outline-color的值
- ridge：
- 定义一个3D凸槽轮廓。此效果取决于outline-color的值
- inset：
- 定义一个3D凹槽轮廓。此效果取决于outline-color的值
- outset：
- 定义一个3D凸槽轮廓。此效果取决于outline-color的值
说明：
outline-style 属性用于设置一个元素的整个轮廓的样式。
outline-offset
取值：
- <length>：
- 定义轮廓距离容器的值。
- inherit：
- 默认继承。
说明：
outline-offset 可以让轮廓偏离容器边缘，即可以调整外框与容器边缘的距离。
outline-width
取值：
- <color>：
- 可以是颜色名 (如 red)，rgb 值(如 rgb(255,0,0)) 或十六进制值 (如 #ff0000)。
- inherit：
- 默认继承。执行颜色反转（逆向的颜色）。这么做是为了使边框在不同的背景颜色中都是可见的。
说明：
outline-color 属性设置一个元素整个轮廓中可见部分的颜色。要记住，轮廓的样式不能是 none，否则轮廓不会出现
来源：//作者：/更新时间：2014-01-22
顶
踩
相关文章：
