轮廓(outline)是绘制于元素周围的一条线 位于边框边缘的外围 可起到突出元素的作用
CSS outline属性规定元素轮廓的样式 颜色和宽度
话不多说 来几个例子 看一看
1:在元素周围画线
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p { border: red solid thin; outline: #00ff00 dotted thick } </style> </head> <body> <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性</p> </body> </html>
2:设置轮廓的颜色
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p { border: red solid thin; outline: #00ff00 dotted thick; outline-color: blue; } </style> </head> <body> <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性</p> </body> </html>
3:设置轮廓的样式
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p { border: red solid thin; outline: #00ff00 dotted thick; outline-color: blue; } 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 属性</p> </body> </html>
4:设置轮廓的宽度
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p { border: red solid thin; outline: #00ff00 dotted thick; outline-color: blue; } p.pOne { border: red solid thin; outline-style: solid; outline-width: medium; } p.pTwo{ border:red solid thin; outline-style:dotted; outline-width:3px; } </style> </head> <body> <p class="pOne">A dotted outline</p> <p class="pTwo">A dashed outline</p> <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性</p> </body> </html>
CSS边框属性
