Css 简明教程

CSS - Outlines

轮廓与边框非常相似，但也有几个主要区别：

轮廓不占用空间。
轮廓不必是矩形的。
大纲轮廓始终各侧相同。您无法为元素的不同侧面指定不同的轮廓值。

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

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

outline-width 属性用于设置轮廓的宽度。
outline-style 属性用于设置轮廓的线条样式。
outline-color 属性用于设置轮廓的颜色。
outline-offset 属性用于设置轮廓与元素的边框边缘之间的间距。
outline 属性用于在一个语句中设置以上所有三个属性。

The outline-width Property

outline-width 属性指定要添加到框的轮廓的宽度。它的值应为长度或 thin、medium 或 thick 中的一个值，就像 border-width 属性一样。

零像素的宽度意味着没有轮廓。

示例如下：

<html>
   <head>
   </head>
   <body>
      <p style = "outline-width: thin; outline-style: solid; padding: 5px">
         This text is having thin outline.
      </p>
      <p style = "outline-width: thick; outline-style: solid; padding: 5px">
         This text is having thick outline.
      </p>
      <p style = "outline-width: 5px; outline-style: solid; padding: 5px">
         This text is having 5px 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; padding: 5px">
         This text is having thin solid outline.
      </p>
      <p style = "outline-width: thick; outline-style: dashed; padding: 5px">
         This text is having thick dashed outline.
      </p>
      <p style = "outline-width: 5px; outline-style: dotted; padding: 5px">
         This text is having 5px dotted outline.
      </p>
   </body>
</html>

The outline-color Property

轮廓颜色属性允许你指定轮廓颜色。其值应该是一个颜色名称、十六进制颜色或 RGB 值，与颜色和边框颜色属性相同。

示例如下：

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

The outline-offset Property

outline-offset 属性用于指定轮廓与元素的边框边缘之间的间距。轮廓与元素之间的间距为透明的。

示例如下：

<html>
   <head>
        <style>
          div.example {
            margin: 20px;
            border: 2px dotted #000;
            background-color: #08ff90;
            outline: 4px solid #666;
            outline-offset: 10px;
          }
        </style>
   </head>
   <body>
        <h2>Outline-offset property</h2>
        <div class="example">The outline-offset is 10px</div>
   </body>
</html>

The outline Property

大纲轮廓属性是一个简写属性，允许您在一个语句中指定不同属性的值。

可以传递的值为：outline-style、outline-color 和 outline-width。
可以传递的值的顺序并不固定。
outline-offset 无法作为简写属性传递给 outline。它需要单独传递。

示例如下：

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

Outline vs Border

下表说明了 outline 与 border 之间的差异：

这是一个示例：

<html>
<head>
   <style>
      p {
         outline: thick solid red;
         outline-offset: 5px;
         padding: 10px;
         border: #009900 inset 10px;
      }
   </style>
</head>
<body>
   <p>See the difference of outline and border around the p element. The outline is red in color and the border is green.</p>
</body>
</html>

下面是 outline/轮廓的一些示例：