CSS - 轮廓



CSS 轮廓用于在元素边框的外部创建线条,而不会影响其大小或布局。这意味着添加轮廓不会影响元素的大小或相邻元素的位置。

css-outlines

目录


 

轮廓的关键特征

以下是轮廓的关键特征

  • 轮廓不占用空间,这意味着如果边距不足,轮廓可能会与相邻元素重叠。
  • 轮廓在所有侧面始终相同。您不能为元素的不同侧面指定不同的轮廓值。
  • 轮廓不必是矩形,因为它们遵循应用于它们的元素的形状。
  • 轮廓通常用于在元素获得焦点(通过按 Tab 键或单击)时突出显示元素,这对于可访问性至关重要。

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-style: 指定轮廓应该是实线、虚线、双线还是其他可能的值
  • outline-width: 指定轮廓的宽度
  • outline-color: 指定轮廓的颜色
  • outline-offset: 指定轮廓和元素边框边缘之间的间距。

Outline-Style 属性

outline-style 属性指定围绕元素的线条(实线、点线或虚线)的样式。

以下示例显示了所有轮廓样式。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> p{ padding: 5px; } </style> </head> <body> <h1>Outline Style Property</h1> <p style="outline-style: dotted;"> Dotted outline. </p> <p style="outline-style: dashed;"> Dashed outline. </p> <p style="outline-style: solid;"> Solid outline. </p> <p style="outline-style: double;"> Double outline. </p> <p style="outline-style: groove;"> Groove outline. </p> <p style="outline-style: ridge;"> Ridge outline. </p> <p style="outline-style: inset;"> Inset outline. </p> <p style="outline-style: outset;"> Outset outline. </p> <p style="outline-style: none;"> No outline. </p> <p style="outline-style: hidden;"> Hidden outline. </p> </body> </html>

Outline-Width 属性

outline-width 属性指定要添加到元素的轮廓的宽度。其值应为 thin、medium、thick 或长度(以像素、em 等为单位),就像 border-width 属性一样。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> p{ outline-style: solid; padding: 10px; } p.thin { outline-width: thin; } p.medium { outline-width: medium; } p.thick { outline-width: thick; } p.length { outline-width: 10px; } </style> </head> <body> <p class="thin"> Thin outline width. </p> <p class="medium"> Medium outline width. </p> <p class="thick"> Thick outline width. </p> <p class="length"> Outline Width: 10px. </p> </body> </html>

Outline-Color 属性

outline-color 用于设置轮廓的颜色。如果未为轮廓指定颜色,则将设置默认值黑色。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .name { outline-style: dashed; outline-color: red; padding: 10px; border: 3px solid black; } .hex { outline-style: solid; outline-color: #00ff00; padding: 10px; border: 3px solid black; } </style> </head> <body> <p class="name"> Outline Color: red </p> <p class="hex"> Outline Color: #00ff00. </p> </body> </html>

Outline Offset 属性

outline-offset 属性用于设置元素与其轮廓之间的间距。这对于在元素与其轮廓之间创建更多视觉分离很有用。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> div { 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> The outline-offset is 10px </div> </body> </html>

Outline 简写属性

在 CSS 中,我们可以使用outline 属性来指定轮廓的样式、宽度和颜色。outline-offset 属性不能在简写属性中传递。它需要单独传递。

语法

h2 { outline: 4px dotted green; outline-offset: 5px; }

以上代码将在 h2 元素的所有侧添加一个绿色、点状、4px 厚的轮廓,并带有 5px 的偏移量。

让我们看一个例子

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> p { outline: solid 4px grey; outline-offset: 2px; border: 2px solid; padding: 5px; } div { /* You can specify in any order */ outline: 5px dashed darkred; outline-offset: 2px; border: 2px solid; padding: 5px; } </style> </head> <body> <p> Check the outline of the paragraph !!!</p> <div> Check the outline of the div !!!</div> </body> </html>

聚焦时的轮廓

outline 属性可用于在元素获得焦点(通过单击或 Tab 键)时突出显示元素。这样,我们可以增强可访问性和用户交互。让我们来看一个关于此的示例。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> input { padding: 10px; border: 2px solid #ccc; border-radius: 4px; outline: none; /* Remove default outline */ } input:focus { outline: 3px solid blue; outline-offset: 4px; } </style> </head> <body> <input type="text" placeholder="Focus me to see the outline!" /> </body> </html>

轮廓与边框

下表说明了轮廓和边框之间的区别

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

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> p { outline: thick solid red; outline-offset: 5px; padding: 10px; border: #009900 inset 10px; } </style> </head> <body> <p> See the difference of outline and border around the p element. The outline is red in color and the border is green. </p> </body> </html>

CSS 轮廓属性列表

这里我们列出了与 CSS 轮廓相关的所有属性。

属性 描述 示例
outline 此示例显示了传递给 outline 作为简写的所有各种值。
outline-color 此示例显示了传递给 outline-color 的所有各种值。
outline-style 此示例显示了传递给 outline-style 的所有各种值。
outline-width 此示例显示了传递给 outline-width 的所有各种值。
outline-offset 此示例显示了传递给 outline-offset 的所有各种值。
广告