CSS 轮廓

CSS 定义了一种特殊的元素装饰，称为轮廓，它绘制在元素边框的外部。CSS 轮廓与边框非常相似，但也有一些重要的区别 −

轮廓不占用空间。
轮廓不需要是矩形的。
轮廓在所有边上始终相同；您无法为元素的不同边指定不同的值。

CSS轮廓 – 示例

以下是一个矩形，其边框为5像素的黑色，轮廓为30像素的绿色。

轮廓示例

本教程将教我们如何设置与轮廓相关的不同属性。CSS允许我们控制轮廓的宽度、颜色、样式等。

CSS轮廓宽度

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

thin = 1像素
medium = 3像素
thick = 5像素
特定大小（以px像素、pt点、cm厘米、em等为单位）

零像素的宽度表示没有轮廓。

示例

以下是设置不同大小轮廓宽度的示例 –

<html>
<body>
   <p style = "outline-width: thin; outline-style:solid; padding: 5px">
      This text is having thin outline.
   </p>
   <p style = "outline-width: medium; outline-style:solid; padding: 5px">
      This text is having thick outline.
   </p>
   <p style = "outline-width: thick; outline-style:solid; padding: 5px">
      This text is having 5px outline.
   </p>
   <p style = "outline-width: 7px; outline-style:solid; padding: 5px">
      This text is having 7px outline.
   </p>
</body>
</html>

CSS轮廓样式

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

auto - 浏览器提供的默认轮廓。
none - 不使用轮廓。轮廓宽度为0。
solid - 轮廓为一条实线。
dotted - 轮廓为一系列点。
dashed - 轮廓为一系列短线段。
double - 轮廓为两条实线。
groove - 轮廓看起来像被雕刻在页面中。
ridge - 轮廓看起来与凹槽相反。
inset - 轮廓使盒子看起来像嵌入在页面中。
outset - 轮廓使盒子看起来像从画布中出来。

示例

这里是一个示例 –

<html>
<body>
   <p style = "outline-width:thick; outline-style:solid; padding:5px;">
      这段文本具有实线边框。
   </p>
   <p style = "outline-width:thick; outline-style:dotted; padding:5px;">
      这段文本具有点状边框。
   </p>
   <p style = "outline-width:thick; outline-style:dashed; padding:5px;">
      这段文本具有虚线边框。
   </p>
   <p style = "outline-width:thick; outline-style:double; padding:5px;">
      这段文本具有双线边框。
   </p>
   <p style = "outline-width:thick; outline-style:groove; padding:5px;">
      这段文本具有凹槽边框。
   </p>
   <p style = "outline-width:thick; outline-style:ridge; padding:5px;">
      这段文本具有凸槽边框。
   </p>
</body>
</html>

CSS轮廓颜色

outline-color 属性用于指定边框轮廓的颜色。它的值可以是颜色名称、十六进制颜色或RGB值，与color和border-color属性相同。

Name – 示例red、blue或green
HEX – 示例#ff0000
RGB – 示例rgb(255,0,0)
HSL – 示例 hsl(0, 100%, 50%)
invert – 将颜色与背景色反转

示例

这是一个示例 −

<html>
<body>
   <p style = "outline-width:thick; outline-style:solid; outline-color:red;padding:5px;">
      使用名称"red"设置轮廓颜色。
   </p>
   <p style = "outline-width:thick; outline-style:solid; outline-color:#40a944; padding:5px;">
      使用十六进制代码"#40a944"设置轮廓颜色。
   </p>
   <p style = "outline-width:thick; outline-style:solid; outline-color:rgb(255,200,0); padding:5px;">
       使用RGB代码"rgb(255,200,0)"设置轮廓颜色。
   </p>
   <p style = "outline-width:thick; outline-style:solid; outline-color:hsl(0, 50%, 50%); padding:5px;">
       使用HSL代码"hsl(0, 50%, 50%)"设置轮廓颜色。
   </p>
   <p style = "outline-width:thick; outline-style:solid; outline-color:invert; padding:5px;">
       使用反转选项设置轮廓颜色。
   </p>
</body>
</html>

CSS Outline Offset属性

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

下面的示例展示了一个轮廓在元素边框之外20像素的效果：

CSS 轮廓

上面的示例显示了元素边框和轮廓之间的空间是透明的。

示例

这是一个示例 −

<html>
<body>
   <p style = "border:1px solid #000; outline:1px solid red; outline-offset:20px;margin:25px">
      轮廓偏移20像素;
   </p>
   <br>
   <p style = "border:1px solid #000; outline:1px solid red; outline-offset:10px;margin:15px">
      轮廓偏移10像素;
   </p>
   <br>
   <p style = "border:1px solid #000; outline:1px solid red; outline-offset:5px;margin:10px">
      轮廓偏移5像素;
   </p>
</body>
</html>

CSS 简写属性outline

outline 属性是一个简写属性，允许您为三个属性中的任何一个指定值，即style、color和width。您可以使用以下语法以任何顺序指定这些属性。

语法

outline: width style color;

示例

这是一个示例 −

<html>
<body>
   <p style = "outline:thin solid red; padding:5px;">
      这段文字具有红色细实线轮廓。
   </p>
   <br />

   <p style = "outline:thick dashed #009900; padding:5px;">
      这段文字具有绿色粗虚线轮廓。
   </p>
   <br />

   <p style = "outline:5px dotted rgb(13,33,232); padding:5px;">
      这段文字具有蓝色5像素点虚线轮廓。
   </p>
</body>
</html>

CSS轮廓 vs 边框

两个明显的区别是，轮廓无法隐藏，而边框可以隐藏；其次轮廓可以自动调整样式，而边框不能。下表说明了轮廓和边框之间的更多区别：

轮廓	边框
轮廓是围绕元素的非矩形形状，通常具有纯色。	边框是绘制在元素内容周围的矩形形状，可以是实线、虚线或点线，并且可以具有不同的颜色和大小。
它在布局中不占用任何空间，不影响元素的大小或位置。	它会影响元素的大小和位置，因为它会给元素添加宽度。
它通常用于突出或强调一个元素，比如当一个元素被聚焦或激活时。	它可以用于各种目的，比如分隔元素、创建框和添加视觉强调。
它可以使用CSS中的outline属性来创建。	它可以使用CSS中的border属性来创建。

CSS Outline – 相关的属性

您可以通过访问以下表中列出的子主题来探索CSS轮廓属性的更多示例：

属性	描述
outline	用一条声明设置所有描边属性的速记属性
outline-color	设置元素的描边颜色
outline-style	设置元素的描边样式
outline-width	设置元素的描边宽度
outline-offset	设置元素的描边偏移量