極客書

CSS - Outlines

輪廓與邊框非常相似，但也沒有什麼大的區別;

  • 輪廓不占地方。

  • 輪廓不必是矩形的。

  • 所有邊的輪廓總是相同的;不能爲元素的不同邊指定不同的值。

注意：IE 6或Netscape 7不支持大綱屬性。

可以使用CSS設置以下大綱屬性。

  • outline width屬性用於設置輪廓的寬度。

  • 大綱樣式屬性用於設置大綱的線條樣式。

  • outline color屬性用於設置大綱的顏色。

  • outline屬性用於在一個語句中設置上述三個屬性。

The outline-width Property

outline width屬性指定要添加到框中的輪廓的寬度。它的值應該是長度或薄、中或厚的值之一，就像border width屬性一樣。

零像素的寬度意味著沒有輪廓。

下面是一個例子;

Live Demo 
<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屬性指定元素周圍的線（實線、虛線或虛線）的樣式。它可以取下列值之一&負;

  • 無無邊框。（相當於輪廓寬度：0;）

  • 實線−輪廓是一條實線。

  • 虛線−輪廓是一系列點。

  • 虛線是一系列短線。

  • double−Outline是兩條實線。

  • groove−輪廓看起來像是刻在頁面上的。

  • 脊−輪廓看起來與凹槽相反。

  • inset−Outline使框看起來像是嵌入到頁面中。

  • 開始−大綱使框看起來像是從畫布中出來的。

  • 隱藏−與無相同。

下面是一個例子;

Live Demo 
<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

大綱顏色屬性允許您指定大綱的顏色。它的值應該是顏色名稱、十六進位顏色或RGB值，就像顏色和邊框顏色屬性一樣。

下面是一個例子;

Live Demo 
<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屬性是一個速記屬性，允許您以任何順序（但僅在一條語句中）爲前面討論的三個屬性中的任何一個指定值。

下面是一個例子;

Live Demo 
<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>

它將產生以下結果&負;