outline(轮廓)与border(边框)非常相似，但也有一些主要区别 -

  • outline不占用空间。

  • outline不必是矩形。

  • outline在所有边上始终相同。您不能为元素不同侧的outline指定不同的值。

注意: IE 6 或 Netscape 7 不支持outline属性。

您可以使用 CSS 设置以下outline(轮廓)属性。

  • outline-width 属性用于设置outline的宽度。

  • outline-style 属性用于设置outline的线条样式。

  • outline-color 属性用于设置outline的颜色。

  • outline-offset 属性用于设置 ab 元素的outline与边框边缘之间的间距。

  • outline 属性用于在一条语句中设置以上三个属性。

outline-width 属性

outline-width 属性指定要添加到框的outline的宽度。它的值应该是长度或thin、medium 或thick 值之一， 就像 border-width 属性一样。

0像素的宽度意味着没有outline。

这是一个示例 -

<html>
   <head>
   </head>
   <body>
      <p style = "outline-width: thin; outline-style: solid; padding: 5px">
         这段文字的轮廓很细。
      </p>
      <p style = "outline-width: thick; outline-style: solid; padding: 5px">
         这段文字有粗轮廓。
      </p>
      <p style = "outline-width: 5px; outline-style: solid; padding: 5px">
         该文本的轮廓为 5 像素。
      </p>
   </body>
</html>

outline-style 属性

outline-style 属性指定线条的样式（实线、点线或虚线）围绕元素。它可以采用以下值之一 -

  • none - 无outline。 (相当于outline-width:0;)

  • solid - outline是一条实线。

  • dotted - outline是一系列点。

  • dashed - outline是一系列短线，虚线。

  • double - outline是两条实线线条。

  • groove - outline看起来像是刻在页面上，凹槽 。

  • ridge - outline看起来看起来与凹槽相反。

  • inset - outline使框看起来像是嵌入在页面中。

  • outset - outline使框看起来像嵌入在页面中。框看起来像是从画布中出来的。

  • hidden - 与none相同。

这是一个示例−

<html>
   <head>
   </head>
   <body>
      <p style = "outline-width: thin; outline-style: solid; padding: 5px">
         该文本具有细实的轮廓。
      </p> 
      <p style = "outline-width: thick; outline-style: dashed; padding: 5px">
         该文本具有粗虚线轮廓。
      </p>
      <p style = "outline-width: 5px; outline-style: dotted; padding: 5px">
         该文本具有 5px 虚线轮廓。
      </p>
   </body>
</html>

outline-color 属性

outline-color 属性允许您指定outline的颜色。它的值应该是颜色名称、十六进制颜色或 RGB 值，与颜色和边框颜色属性一样。

这是一个示例 -

<html>
   <head>
   </head>
   <body>
      <p style = "outline-width: thin; outline-style: solid; outline-color: red; padding: 5px">
         该文本具有细实的红色轮廓。
      </p>
      <p style = "outline-width: thick; outline-style: dashed; outline-color: #009900; padding: 5px">
         该文本具有粗虚线绿色轮廓。
      </p>     
      <p style = "outline-width: 5px; outline-style: dotted; outline-color: rgb(13,33,232); padding: 5px">
         该文本具有 5 像素的蓝色虚线轮廓。
      </p>
   </body>
</html>

outline-offset 属性

outline-offset 属性用于指定元素的outline和边框边缘之间的间距。outline和元素之间的空间是透明的。

这是一个示例 -

<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">轮廓偏移为 10px</div>
   </body>
</html>

outline 属性

outline 属性是一个简写属性，允许您在单个语句中指定不同属性的值。

  • 可以传递的值是outline-style 、outline-color 和 outline-width。

  • 值的传递顺序不固定。

  • outline-offset 不能作为 outline 中的简写属性传递。需要单独传递。

这是一个示例 -

<html>
   <head>
   </head>
   <body>
      <p style = "outline: thin solid red; padding: 10px;">
         该文本具有细实的红色轮廓。
      </p>
      <p style = "outline: thick dashed #009900; padding: 10px;">
        该文本具有粗虚线绿色轮廓。
      </p>
      <p style = "outline: 5px dotted rgb(13,33,232); padding: 10px;">
         该文本具有 5 像素的蓝色虚线轮廓。
      </p>
   </body>
</html>

outline与border

下表说明了差异outline和border之间:

outline(伦廊)border(边框)
伦廊是围绕元素的非矩形形状，通常为纯色。边框是围绕元素绘制的矩形形状。元素的内容，可以是实线、虚线或点线，并且可以有不同的颜色和大小。
它不占用布局中的任何空间，也不影响元素的大小或位置。它会影响元素的大小和位置，因为它会增加元素的宽度。
通常是用于突出显示或强调某个元素，例如当某个元素获得焦点或激活时。它可用于多种目的，例如分隔元素、创建框和添加视觉强调。
可以使用CSS中的outline属性创建。可以使用border属性创建

这是一个示例:

<html>
<head>
   <style>
      p {
         outline: thick solid red;
         outline-offset: 5px; 
         padding: 10px; 
         border: #009900 inset 10px;
      }
   </style>
</head>
<body>
   <p>查看 p 元素周围轮廓和边框的差异。 轮廓为红色，边框为绿色。</p>
</body>
</html>

outline的一些示例如下:

属性描述
outline此示例显示传递的所有各种值以outline作为简写。
outline-color此示例显示传递给 outline-color 的所有不同值。
outline- style此示例显示传递给 outline-style 的所有不同值。
outline-offset此示例显示传递的所有各种值outline-offset .