css3.0学习用户界面 User-interface 2
第四节 用户界面 User-interface
4.outline-width
语法：
outline-width:thin|medium|thick|<length>
相关属性:outline,outline-color,outline-style,outline-offset
取值：
thin:定义细轮廓
medium:默认，定义中等的轮廓
thick:定义粗轮廓
<length>:定义轮廓粗细的值
说明：
outline-width属性设置元素整个轮廓的宽度，只有当轮廓样式不是none时，这个宽度才会起作用，如果样式为none，宽度实际上会重置为0，不允许设置负长度值，参见outline属性 http://%77%77%77%2E%66网站制作%6F学习网%72%61%73%70%2E%63%6E
兼容性：
IE8,Firefox3.0,Firefox3.5,chrome2.0,opera9.64,Safari4支持
代码示例：
<div style="width: 160px;padding: 10px;height: 30px;border: 2px solid black;outline-color:#897048;outline-style:groove;outline-width:2px;outline-offset: 5px;">这绘制的是一个轮廓边框</div>
5.outline-style
语法：
outline-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset
相关属性:outline,outline-width,outline-offset,outline-color
取值：
none:默认值，定义无轮廓
dotted:定义一个点状的轮廓
dashed:定义一个虚线轮廓
solid:定义一个实线轮廓
double:定义一个双线轮廓，双线的宽度等同于outline-width的值
groove:定义一个3D凹槽轮廓，此效果取决于outline-color的值
ridge:定义一个3D凸槽轮廓，此效果取决于outline-color的值
inset:定义一个3D凹槽轮廓，此效果取决于outline-color的值
outset:定义一个3D凸槽轮廓，此效果取决于outline-color的值 http://%77%77%77%2E%66网站制作%6F学习网%72%61%73%70%2E%63%6E
说明：
outline-style属性用于设置一个元素的整个轮廓的样式，参见outline属性
兼容性：
IE8,Firefox3.0,Firefox3.5,chrome2.0,opera9.64,Safari4支持
代码示例：
<div style="width: 160px;padding: 10px;height: 30px;border: 2px solid black;outline-color:#897048;outline-style:dotted;outline-width:2px;outline-offset: 5px;">这绘制的是一个轮廓边框</div>
6.outline-offset
语法：
outline-offset:<length>|inherit
相关属性:outline,outline-width,outline-style,outline-color
取值：
<length>:定义轮廓距离容器的值
inherit:默认继承
说明：
outline-offset可以让轮廓偏离容器边缘，即可以调整外边框与容器边缘的距离，参见outline属性 http://%77%77%77%2E%66网站制作%6F学习网%72%61%73%70%2E%63%6E
兼容性：
IE8,Firefox3.0,Firefox3.5,chrome2.0,opera9.64,Safari4支持
代码示例：
<div style="width: 160px;padding: 10px;height: 30px;border: 2px solid black;outline-color:#897048;outline-style:solid;outline-width:2px;outline-offset: 5px;">这绘制的是一个轮廓边框</div>
7.outline-color
语法：
outline-width:<color>|inherit
相关属性:outline,outline-width,outline-style,outline-offset
取值：
<color>:可以是颜色名（如 red），rgb值（如rgb(255,0,0)）或十六进制值（如#ff0000）
inherit:默认继承，执行颜色翻转（逆向的颜色），这么做是为了使边框在不同的背景颜色中都是可见的
说明：
outline-color属性设置一个元素整个轮廓中可见部分的颜色，要记住，轮廓的样式不能是none，否则轮廓不会出现，参见outline属性
兼容性：
IE8,Firefox3.0,Firefox3.5,chrome2.0,opera9.64,Safari4支持 http://%77%77%77%2E%66网站制作%6F学习网%72%61%73%70%2E%63%6E
代码示例：
<div style="width: 150px;padding: 10px;height: 30px;border: 2px solid black;outline-color:#FF6600;outline-style:solid;outline-width:2px;outline-offset: 10px;">这绘制的是一个轮廓边框</div>