CSS Outlines
輪廓(outline)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。
輪廓(outline)屬性指定了樣式,顏色和外邊框的寬度。
CSS 輪廓(outline)
#輪廓(outline)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
所有CSS 輪廓(outline)屬性
"CSS" 欄位中的數字表示哪個CSS版本定義了該屬性(CSS1 或CSS2)。
應用實例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> p { border: red solid thin; } p.dotted {outline-style: dotted} p.dashed {outline-style: dashed} p.solid {outline-style: solid} p.double {outline-style: double} p.groove {outline-style: groove} p.ridge {outline-style: ridge} p.inset {outline-style: inset} p.outset {outline-style: outset} </style> </head> <body> <p class="dotted">A dotted outline</p> <p class="dashed">A dashed outline</p> <p class="solid">A solid outline</p> <p class="double">A double outline</p> <p class="groove">A groove outline</p> <p class="ridge">A ridge outline</p> <p class="inset">An inset outline</p> <p class="outset">An outset outline</p> <p><b>注释:</b>只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本) 才支持 outline-style 属性。</p> </body> </html>
實例2:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>轮廓测试</title> <style> .show{ margin: 50px; width: 100px; height: 100px; background-color: blue; border-radius : 1px; box-shadow: 0 0 0 30px lightblue; } </style> </head> <body> <div class="show">CSS轮廓</div> </body> </html>