Css 简明教程

CSS - Outlines

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

Outlines are very similar to borders, but there are few major differences as well −

An outline does not take up space.
Outlines do not have to be rectangular.
Outline is always the same on all sides. You cannot specify different values for outline on different sides of an element.

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

NOTE − The outline properties are not supported by IE 6 or Netscape 7.

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

You can set the following outline properties using CSS.

The outline-width property is used to set the width of the outline.
The outline-style property is used to set the line style for the outline.
The outline-color property is used to set the color of the outline.
The outline-offset property is used to set the space between the outline and border edge of ab element.
The outline property is used to set all the above three properties in a single statement.

The outline-width Property

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

The outline-width property specifies the width of the outline to be added to the box. Its value should be a length or one of the values thin, medium, or thick, just like the border-width attribute.

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

A width of zero pixels means no outline.

示例如下：

Here is an example −

<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 属性指定环绕元素的线条（实线、点线或虚线）的样式。它可以采用以下值之一：

The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element. It can take one of the following values −

none − No outline. (Equivalent of outline-width:0;)
solid − Outline is a single solid line.
dotted − Outline is a series of dots.
dashed − Outline is a series of short lines.
double − Outline is two solid lines.
groove − Outline looks as though it is carved into the page.
ridge − Outline looks the opposite of groove.
inset − Outline makes the box look like it is embedded in the page.
outset − Outline makes the box look like it is coming out of the canvas.
hidden − Same as none.

示例如下：

Here is an example −

<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 值，与颜色和边框颜色属性相同。

The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.

示例如下：

Here is an example −

<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 属性用于指定轮廓与元素的边框边缘之间的间距。轮廓与元素之间的间距为透明的。

The outline-offset property is used to specify the space between an outline and the border edge of an element. The space between the outline and the element is transparent.

示例如下：

Here is an example −

<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

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

The outline property is a shorthand property that allows you to specify values of different properties in a single statement.

The values that can be passed are outline-style, outline-color and outline-width.
The order in which the values can be passed is not fixed.
outline-offset cannot be passed as a shorthand property in outline. It needs to be passed separately.

示例如下：

Here is an example −

<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 之间的差异：

Following table illustrates the differences between outline and border:

这是一个示例：

Here is an example:

<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/轮廓的一些示例：

Some of the examples of the outlines are as follows: