CSS 轮廓样式属性-之路教程

语法

outline-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

轮廓样式属性的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .p1 {
        outline-style: solid;
      }
      .p2 {
        outline-style: dashed;
      }
      .p3 {
        outline-style: dotted;
      }
      .p4 {
        outline-style: double;
      }
      .p5 {
        outline-style: none;/*hidden*/
      }
      .p6 {
        outline-style: groove;
        outline-color: #ccc;
      }
      .p7 {
        outline-style: ridge;
        outline-color: #ccc;
      }
      .p8 {
        outline-style: inset;
        outline-color: #ccc;
      }
      .p9 {
        outline-style: outset;
        outline-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>Outline 属性示例</h2>
    <p class=“p1”>这是一个轮廓设置为实心的段落</p>
<p class=“p2”>这是一个轮廓设置为虚线的段落</p>
<p class=“p3”>这是一个轮廓设置为虚线的段落</p>
<p class=“p4”>这是一个轮廓设置为双的段落</p>
<p class=“p5”>这是一个轮廓设置为“无”的段落</p>
<p class=“p6”>这是一个轮廓设置为groove的段落</p>
<p class=“p7”>这是一个轮廓设置为脊线的段落</p>
<p class=“p8”>这是一个轮廓设置为插入的段落</p>
<p class=“p9”>这是一个轮廓设置为开头的段落</p>
  </body>
</html>

具有所有值的轮廓样式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p.dotted {
        outline: 4px dotted gray;
      }
      p.dashed {
        outline: 0.2em dashed rgb(142, 191, 66);
      }
      p.solid {
        outline: 4px solid #ccc;
      }
      p.double {
        outline: 4px double #000;
      }
      p.groove {
        outline: 4px groove #666;
      }
      p.ridge {
        outline: thick ridge #1c87c9;
      }
      p.inset {
        outline: medium inset #1c87c9;
      }
      p.outset {
        outline: 4px outset #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Outline 属性示例</h2>
    <p class="dotted">生活终归还得继续。 </p>
    <p class="dashed">生活终归还得继续。 </p>
    <p class="solid">生活终归还得继续。 </p>
    <p class="double">生活终归还得继续。 </p>
    <p class="groove">生活终归还得继续。 </p>
    <p class="ridge">生活终归还得继续。 </p>
    <p class="inset">生活终归还得继续。 </p>
    <p class="outset">生活终归还得继续。 </p>
  </body>
</html>

具有“groove”值的轮廓样式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        color: #7f7fa7;
        text-align: center;
        outline-width: 8px;
        outline-style: groove;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Outline 属性示例</h1>
    <p>This is a paragraph with outline set to groove.</p>
  </body>
</html>

具有“ridge”值的轮廓样式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        color: #69afad;
        text-align: center;
        outline-width: 8px;
        outline-style: ridge;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Outline 属性示例</h1>
    <p>This is a paragraph with outline set to ridge.</p>
  </body>
</html>

具有 "inset" 值的轮廓样式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        color: #69afad;
        text-align: center;
        outline-width: 8px;
        outline-style: inset;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Outline 属性示例</h1>
    <p>This is a paragraph with outline set to ridge.</p>
  </body>
</html>

具有 "outset" 值的轮廓样式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        color: #69afad;
        text-align: center;
        outline-width: 8px;
        outline-style: outset;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Outline 属性示例</h1>
    <p>This is a paragraph with outline set to ridge.</p>
  </body>
</html>

带有“dotted”值的outline-style属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        color: #69afad;
        text-align: center;
        outline-width: 4px;
        outline-style: dotted;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Outline 属性示例</h1>
    <p>This is a paragraph with outline set to ridge.</p>
  </body>
</html>

具有“虚线”值的轮廓样式属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        color: #69afad;
        text-align: center;
        outline-width: 4px;
        outline-style: dashed;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Outline 属性示例</h1>
    <p>This is a paragraph with outline set to ridge.</p>
  </body>
</html>

CSS 轮廓样式属性

轮廓样式属性定义轮廓的样式。

它类似于边界属性，但有区别。

轮廓在元素的边框之外，不占用空间。
默认情况下，它围绕元素的四个边绘制。

轮廓样式属性具有以下值：

none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

元素的宽度和高度属性不包括轮廓宽度，因为轮廓不被视为元素尺寸的一部分。

初始值	none
应用于	所有元素。
继承	无效
可动画的	无效
版本	CSS2.
DOM 语法	object.Style.outlinestyle =“dotted”

CSS outline-style 属性值说明

值	描述
none	将显示任何轮廓。这是此属性的默认值。
hidden	定义隐藏的轮廓。
dotted	轮廓被指定为一系列点。
dashed	轮廓被指定为一系列破折号。
solid	轮廓被指定为实线。
double	轮廓被指定为双实线。
groove	指定3D沟槽轮廓。
ridge	指定3D拆卸轮廓。
inset	指定嵌入式轮廓。
outset	指定浮雕轮廓。
initial	将属性设置为默认值。
inherit	从其父元素继承属性。

日期：2020-06-02 22:14:42 来源：oir作者：oir

←CSS 轮廓偏移属性

CSS 轮廓宽度属性→

语法

轮廓样式属性的示例：

具有所有值的轮廓样式属性示例：

具有“groove”值的轮廓样式属性示例：

具有“ridge”值的轮廓样式属性示例：

具有 "inset" 值的轮廓样式属性示例：

具有 "outset" 值的轮廓样式属性示例：

带有“dotted”值的outline-style属性示例：

具有“虚线”值的轮廓样式属性示例：

CSS outline-style 属性值说明

目录