CSS（9）轮廓

最新推荐文章于 2024-08-14 09:00:00 发布

weixin_30915951

最新推荐文章于 2024-08-14 09:00:00 发布

阅读量49

点赞数

原文链接：http://www.cnblogs.com/sunyunh/archive/2012/08/31/2666196.html

版权

　　在CSS中，outline属性用于设置元素的轮廓，轮廓是绘制于元素周围的一条线，位于边框（border）边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式（outline-style）、颜色（outline-color）和宽度（outline-width）。

一、outline-style

　　 outline-style 属性用于设置元素的整个轮廓的样式。outline-style属性的取值包括none（无轮廓）、solid（实线轮廓）和dashed（虚线轮廓）等，样式不能是 none，否则轮廓不会出现。

　　注意：1.在设置 outline-color 属性之前声明 outline-style 属性，因为元素只有获得轮廓以后才能改变其轮廓的颜色；

　　　　　2.轮廓线不会占据空间，也不一定是矩形。

　　　　 3.默认情况下，除了IE浏览器，所有主流浏览器都支持 outline-style 属性；要想使IE浏览器支持元素的 outline-style 属性，给文档加上 !DOCTYPE文档声明即可。

/*设置段落的轮廓样式为点线轮廓*/
p
  {
  outline-style:dotted;
  }

二、outline-color

　　outline-color 属性设置一个元素整个轮廓中可见部分的颜色。outline-color属性的取值可以是颜色名称（比如red）、十六进制的颜色值（比如#ff000000）或rgb颜色值（如rgb(255,0,0)）。

　　注意：1.轮廓的样式（outline-style）不能是 none，否则轮廓不会显示。

　　　　　2.和outline-style属性一样，只有在规定了 !DOCTYPE 时，IE浏览器才支持 outline-color 属性。

/*为段落设置绿色点线轮廓*/
p 
{
border:red solid thin;
outline-style:dotted;
outline-color:#00ff00;
}

三、outline-width

　　outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。outline-width属性的取值可以是thin（细轮廓）、medium（默认，中等粗细的轮廓）、thick（粗轮廓）或length（自定义轮廓粗细的值）等。但是，不允许设置负长度值。

/*设置段落的轮廓为5px宽的点状轮廓*/
p
  {
  outline-style:dotted;
  outline-width:5px;
  }

四、outline

　　outline属性是前面三个属性（outline-style、outline-color和outline-width）的简写属性，该属性用于在一个声明中设置所有的轮廓属性。这三个属性的顺序也是任意的。

　　下面是一个采用简写outline属性设置元素轮廓的完整示例。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <style type="text/css">
 5 p 
 6 {
 7 /*设置段落边框*/
 8 border:red solid thin;
 9 /*为段落设置轮廓（点线红色粗轮廓)*/
10 outline:#00ff00 dotted thick;
11 }
12 </style>
13 </head>
14 
15 <body>
16 <p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。</p>
17 </body>
18 </html>