CSS - 概述

大纲与边框非常相似,但几乎没有什么重大差异和减号;

  • 大纲没有占用空间.

  • 轮廓不一定是矩形.

  • 大纲是各方面总是一样的;你不能为元素的不同边指定不同的值.

注意 :  IE 6或Netscape 7不支持大纲属性.

您可以使用CSS设置以下大纲属性.

  • outline-width 属性用于设置轮廓的宽度.

  • outline-style 属性用于设置轮廓的线条样式.

  • outline-color 属性用于设置轮廓的颜色.

  • 轮廓属性用于设置以上三个属性在单一陈述中.

outline-width属性

大纲 - width 属性指定要添加到框中的轮廓的宽度.它的值应该是一个长度或其中一个值 thin,medium或thick,就像border-width属性一样.

零像素的宽度意味着没有大纲.

这是一个例子 :

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

The outline-style Property

outline-style属性指定围绕元素的线条(实线,点线或虚线)的样式。 它可以采用以下值之一:

  • none : 无边界。 (相当于outline-width:0;)

  • solid :大纲是一条实线。

  • dotted: 大纲是一系列的点。

  • dashed:大纲是一系列短线。

  • double: 大纲是两条实线。

  • groove :大纲看起来好像被刻在页面中。

  • ridge : 轮廓看起来与凹槽相反。

  • inset : 大纲使框看起来像是嵌入在页面中。

  • outset : 大纲使框看起来像是从画布中出来。

  • hidden : 与无相同

这是一个例子:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

The outline-color Property

outline-color属性允许您指定轮廓的颜色。 它的值应该是颜色名称,十六进制颜色或RGB值,与颜色和边框颜色属性一样。

这是一个例子:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

The outline Property

outline属性是一个速记属性,允许您以任何顺序但在单个语句中指定前面讨论的三个属性中的任何一个的值。

这是一个例子:

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>