CSS - 轮廓

CSS 大纲

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

轮廓不占用空间。
轮廓不必是矩形。
所有侧面的轮廓始终相同；您不能为元素的不同侧指定不同的值。

CSS 大纲 - 演示

尝试为 CSS轮廓属性选择不同的值，并在右侧框中查看结果。

CSS 大纲 - 示例

以下是具有 5 像素黑色边框和 30 像素绿色轮廓的矩形。

概要示例

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

CSS 轮廓宽度

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

薄 = 1 像素
中 = 3 像素
厚 = 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 - 轮廓是一系列点。
虚线- 轮廓是一系列短线段。
double - 轮廓是两条实线。
groove - 轮廓看起来好像是刻在页面上的。
脊- 轮廓看起来与凹槽相反。
inset - 轮廓使框看起来像是嵌入在页面中的。
开始- 轮廓使盒子看起来像是从画布中出来的。

例子

这是一个例子 -

<html>
<body>
   <p style = "outline-width:thick; outline-style:solid; padding:5px;">
      This text is having solid  outline.
   </p>
   <p style = "outline-width:thick; outline-style:dotted; padding:5px;">
      This text is having dotted  outline.
   </p>
   <p style = "outline-width:thick; outline-style:dashed; padding:5px;">
      This text is having dashed  outline.
   </p>
   <p style = "outline-width:thick; outline-style:double; padding:5px;">
      This text is having double  outline.
   </p>
   <p style = "outline-width:thick; outline-style:groove; padding:5px;">
      This text is having groove  outline.
   </p>
   <p style = "outline-width:thick; outline-style:ridge; padding:5px;">
      This text is having ridge  outline.
   </p>
</body>
</html>

CSS 轮廓颜色

轮廓颜色属性用于指定轮廓的颜色。它的值应该是颜色名称、十六进制颜色或 RGB 值，与 color 和 border-color 属性一样。

名称 - 例如红色、蓝色或绿色
十六进制 - 示例 #ff0000
RGB - 示例 rgb(255,0,0)
HSL - 示例 hsl(0, 100%, 50%)
反转 - 反转颜色与背景

例子

这是一个例子 -

<html>
<body>
   <p style = "outline-width:thick; outline-style:solid; outline-color:red;padding:5px;">
      Outline color set with name "red".
   </p>
   <p style = "outline-width:thick; outline-style:solid; outline-color:#40a944; padding:5px;">
      Outline color set with Hex code "#40a944".
   </p>
   <p style = "outline-width:thick; outline-style:solid; outline-color:rgb(255,200,0); padding:5px;">
       Outline color set with RGB code "rgb(255,200,0)".
   </p>
   <p style = "outline-width:thick; outline-style:solid; outline-color:hsl(0, 50%, 50%); padding:5px;">
       Outline color set with HSL code "hsl(0, 50%, 50%)".
   </p>
   <p style = "outline-width:thick; outline-style:solid; outline-color:invert; padding:5px;">
       Outline color set with invert option.
   </p>
</body>
</html>

CSS 轮廓偏移

Outline -Offset属性用于指定元素的轮廓和边框边缘之间的空间。轮廓和元素之间的空间是透明的。

以下示例显示了元素边框外 20px 的轮廓：

轮廓偏移示例

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

例子

这是一个例子 -

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

CSS 大纲速记

轮廓属性是一个简写属性，允许您指定样式、颜色和宽度这三个属性中任意一个的值。您可以使用以下语法以任意顺序指定这些属性。

句法

outline: width style color;

例子

这是一个例子 -

<html>
<body>
   <p style = "outline:thin solid red; padding:5px;">
      This text is having thin solid red outline.
   </p>
   <br />

   <p style = "outline:thick dashed #009900; padding:5px;">
      This text is having thick dashed green outline.
   </p>
   <br />

   <p style = "outline:5px dotted rgb(13,33,232); padding:5px;">
      This text is having 5x dotted blue outline.
   </p>
</body>
</html>

CSS 轮廓与边框

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

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

CSS 大纲 - 相关属性

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

财产	描述
大纲	用于在一个声明中设置所有大纲属性的简写属性
轮廓颜色	设置元素的轮廓颜色
轮廓式	设置元素的轮廓样式
轮廓宽度	设置元素的轮廓宽度
轮廓偏移	设置元素的轮廓偏移