CSS - outline-width 属性

CSS **outline-width** 属性定义元素周围轮廓的宽度。轮廓是在元素边框外绘制的一条线。

语法

outline-width: medium | thin | thick | length | initial | inherit;

属性值

值	描述
medium	设置中等宽度的轮廓。默认值。
thin	设置细轮廓。
thick	设置粗边框。
length	轮廓厚度以长度单位给出（例如 px、em、rem 等）。
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-width** 属性。

使用长度值的轮廓宽度属性

可以使用长度单位（例如 px、em、rem 等）设置元素轮廓的宽度。在以下示例中，使用了 'px' 和 'em' 值。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;
      }

      .ex1 {
         outline-width: 6px;
      }

      .ex2 {
         outline-width: 1em;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-width property
   </h2>
   <h4>
      outline-width: 6px
   </h4>
   <div class="example ex1">
      This div has outline-width: 6px 
   </div>
   <h4>
      outline-width: 1em
   </h4>
   <div class="example ex2">
      This div has outline-width: 1em 
   </div>
</body>

</html>

使用 thin 值的轮廓宽度属性

要将元素轮廓的宽度设置为细宽度，我们使用 **thin** 值。这在下面的示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;
         outline-width: thin;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-width property
   </h2>
   <h4>
      outline-width: thin
   </h4>
   <div class="example">
      This div has outline-width: thin 
   </div>
</body>

</html>

使用 medium 值的轮廓宽度属性

要将元素轮廓的宽度设置为中等宽度，我们使用 **medium** 值。这在下面的示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;
         outline-width: medium;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-width property
   </h2>
   <h4>
      outline-width: medium
   </h4>
   <div class="example">
      This div has outline-width: medium
   </div>
</body>

</html>

使用 thick 值的轮廓宽度属性

要将元素轮廓的宽度设置为粗宽度，我们使用 **thick** 值。这在下面的示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin: 20px;
         padding: 10px;
         text-align: center;
         border: 4px dashed black;
         background-color: #08ff90;
         outline-color: red;
         outline-offset: 2px;
         outline-style: solid;
         outline-width: thick;
      }
   </style>
</head>

<body>
   <h2>
      CSS outline-width property
   </h2>
   <h4>
      outline-width: thick
   </h4>
   <div class="example">
      This div has outline-width: thick
   </div>
</body>

</html>

支持的浏览器

属性
outline-width	1.0	8.0	1.5	1.2	7.0

css_properties_reference.htm

打印页面