CSS - outline 属性

CSS 的 **outline** 属性在元素边框外部绘制一条线。它是一个简写属性，用于在一个语句中定义以下属性的值： outline-width、 outline-style 和 outline-color。必须定义 **outline-style**。如果未指定，则将使用其他属性的默认值。

语法

outline: outline-width outline-style outline-color | initial | inherit;

属性值

值	描述
outline-width	它设置元素轮廓的宽度。
outline-style	它设置元素轮廓的样式。
outline-color	它设置元素轮廓的颜色。可以使用不同的格式（例如命名颜色、十六进制值、rgb 值、hsl 值等）。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS Outline 属性示例

以下示例说明了 **outline** 属性。

定义 Outline 属性的所有值

**outline** 属性是定义轮廓的三个属性的简写：**outline-width**、**outline-style** 和 **outline-color**。要在单个语句中设置所有这些值，我们提供三个值。在这三个值中，样式是必须的。如果未指定，则将应用颜色和宽度的默认值。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         color: blue;
         text-align: center;
         padding: 7px;
         margin: 25px;
         height: 50px;
         background-color: lightgray;
         border: 4px solid black;
      }

      #first {
         outline: 7px dotted green;
      }

      #second {
         outline: 9px double green;
      }

      #third {
         outline: 5px dashed green;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline property
   </h2>
   <h4>
      outline: 7px dotted green
   </h4>
   <p id="first">
      This paragraph has border: 4px solid 
      black and outline: 7px dotted green.
   </p>
   <h4>
      outline: 9px double green
   </h4>
   <p id="second">
      This paragraph has border: 4px solid 
      black and outline: 9px double green.
   </p>
   <h4>
      outline: 5px dashed green
   </h4>
   <p id="third">
      This paragraph has border: 4px solid 
      black and outline: 5px dashed green.
   </p>
</body>

</html>

Outline 属性的组成属性

**outline** 属性是 **outline-width**、**outline-style** 和 **outline-color** 的简写属性。这些属性可以组合使用以产生与仅使用 **outline** 属性产生的相同效果。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         color: blue;
         text-align: center;
         padding: 7px;
         margin: 25px;
         height: 50px;
         background-color: lightgray;

         border: 4px solid black;
         outline-width: 7px;
         outline-style: dashed;
         outline-color: red;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline property
   </h2>
   <h4>
      outline-width: 7px, outline-style: 
      dashed, outline-color: red
   </h4>
   <p>
      This paragraph has border: 4px solid 
      black and outline: 7px dashed red.
   </p>
</body>

</html>

支持的浏览器

属性
outline	1.0	8.0	1.5	1.2	7.0

css_properties_reference.htm

打印页面