轮廓相关属性

　　轮廓相关属性主要用于让目标对象周围有一圈“光晕”效果，这圈光晕不会占用页面实际的物理布局。通过轮廓相关属性，可设置该“光晕”的颜色、线宽、线型等属性。轮廓相关属性有如下几个。
　　➢　outline：这是一个复合属性，可全面设置目标对象轮廓的颜色、线型、线宽三个属性。
　　➢　outline-color：用于设置组件的轮廓颜色。
　　➢　outline-style：用于设置组件的轮廓线型。该属性支持的属性值有none、dotted、dashed、solid、double、groove、ridge、inset、outset，这些属性值与前面介绍边框线型时各属性值的意义完全相同。
　　➢　outline-width：用于设置目标组件的轮廓宽度。
　　➢　outline-offset：用于设置目标组件的轮廓偏移距（就是轮廓与边框之间的距离）。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>轮廓相关属性测试</title>
    <style type="text/css">
        body {
            font-size: 24pt;
        }
        /* 设置div元素的宽度和高度 */
        div {
            font-size: 12pt;
            width: 400px;
            height: 60px;
            border: 1px solid black;
        }
    </style>
</head>  
<body>  
outline: rgba(50,50,50,0.5) solid 10px  
<div style="outline: rgba(50,50,50,0.5) solid 10px;">  
宽度为10的灰色实线轮廓</div>
outline: rgba(50,50,50,0.5) groove 16px  
<div style="outline: rgba(50,50,50,0.5) groove 16px;">  
宽度为16的灰色凹槽线轮廓</div>
outline: rgba(50,50,50,0.5) ridge 16px  
<div style="outline: rgba(50,50,50,0.5) ridge 16px;">  
宽度为16的灰色凸槽线轮廓</div>
outline: rgba(50,50,50,0.5) ridge 10px;outline-offset:10px;  
<div style="outline: rgba(50,50,50,0.5) ridge 10px;  
    outline-offset:10px;">
宽度为10、偏移距也为10的灰色虚线轮廓</div>
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。