概述（Outlines）

优质

小牛编辑

128浏览

2023-12-01

轮廓与边界非常相似，但几乎没有重大差异 -

轮廓不占用空间。
轮廓不必是矩形。
各方面的大纲总是一样的; 您不能为元素的不同边指定不同的值。

NOTE - IE 6或Netscape 7不支持大纲属性。

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

outline-width属性用于设置轮廓的宽度。
outline-style属性用于设置轮廓的线条样式。
outline-color属性用于设置轮廓的颜色。
outline属性用于在单个语句中设置上述所有三个属性。

outline-width属性

outline-width属性指定要添加到框中的轮廓的宽度。它的值应该是一个长度或thin, medium, or thick,的值之一thin, medium, or 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>

大纲样式属性

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

none - 没有边界。（相当于outline-width:0;）
solid - Outline是一条实线。
dotted - 大纲是一系列点。
dashed - 大纲是一系列短线。
double - Outline是两条实线。
groove - 轮廓看起来好像刻在页面上。
ridge - 轮廓看起来与凹槽相反。
inset - Outline使框看起来像是嵌入在页面中。
outset - Outline使框看起来像是从画布中出来的。
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>

轮廓颜色属性

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>

大纲属性

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>