CSS - outline-style 属性



CSS 的 **outline-color** 属性决定元素周围轮廓的样式。轮廓是在元素边框周围绘制的一条线。

语法

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

属性值

描述
none 指定没有轮廓。默认值。
hidden 指定隐藏的轮廓。
dotted 指定点状轮廓。
dashed 指定虚线轮廓。
solid 指定实线轮廓。
double 指定双线轮廓。
groove 指定 3D 凹槽轮廓。效果取决于 outline-color 值。
ridge 指定 3D 凸起轮廓。效果取决于 outline-color 值。
inset 指定 3D 内嵌轮廓。效果取决于 outline-color 值。
outset 指定 3D 外凸轮廓。效果取决于 outline-color 值。
initial 将属性设置为默认值。
inherit 从父元素继承该属性。

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** 属性。

使用 None 值的轮廓样式属性

要使元素没有任何轮廓,我们使用 **none** 值。在以下示例中,**none** 值已与 **outline-style** 属性一起使用。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .example { margin: 20px; padding: 10px; text-align: center; background-color: #08ff90; outline-width: 7px; outline-style: none; } </style> </head> <body> <h2> CSS outline-style property </h2> <h4> outline-style: none </h4> <div class="example ex1"> This div has outline-style: none </div> </body> </html>

使用 Hidden 值的轮廓样式属性

要使元素具有隐藏的轮廓,我们使用 **hidden** 值。在以下示例中,hidden 值与 **outline-style** 属性一起使用。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .example { margin: 20px; padding: 10px; text-align: center; background-color: #08ff90; outline-width: 7px; outline-style: hidden; } </style> </head> <body> <h2> CSS outline-style property </h2> <h4> outline-style: hidden </h4> <div class="example ex1"> This div has outline-style: hidden </div> </body> </html>

使用 Dotted 值的轮廓样式属性

要使元素具有点状轮廓,我们使用 **dotted** 值。在以下示例中,dotted 值已与 **outline-style** 属性一起使用。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .example { margin: 20px; padding: 10px; text-align: center; border: 4px dashed black; background-color: #08ff90; outline-width: 7px; outline-color: red; outline-offset: 2px; outline-style: dotted; } </style> </head> <body> <h2> CSS outline-style property </h2> <h4> outline-style: dotted </h4> <div class="example ex1"> This div has border: 4px dashed black and outline-style: dotted </div> </body> </html>

使用 Dashed 值的轮廓样式属性

要使元素具有虚线轮廓,我们使用 **dashed** 值。在以下示例中,dashed 值已与 **outline-style** 属性一起使用。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .example { margin: 20px; padding: 10px; text-align: center; border: 4px solid black; background-color: #08ff90; outline-width: 7px; outline-color: red; outline-offset: 2px; outline-style: dashed; } </style> </head> <body> <h2> CSS outline-style property </h2> <h4> outline-style: dashed </h4> <div class="example ex1"> This div has border: 4px solid black and outline-style: dashed </div> </body> </html>

使用 Solid 值的轮廓样式属性

要使元素具有实线轮廓,我们使用 **solid** 值。在以下示例中,solid 值已与 **outline-style** 属性一起使用。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .example { margin: 20px; padding: 10px; text-align: center; border: 4px dashed black; background-color: #08ff90; outline-width: 7px; outline-color: red; outline-offset: 2px; outline-style: solid; } </style> </head> <body> <h2> CSS outline-style property </h2> <h4> outline-style: solid </h4> <div class="example ex1"> This div has border: 4px dashed black and outline-style: solid </div> </body> </html>

使用 Double 值的轮廓样式属性

要使元素具有双线轮廓,我们使用 **double** 值。在以下示例中,double 值已与 **outline-style** 属性一起使用。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .example { margin: 20px; padding: 10px; text-align: center; border: 4px dashed black; background-color: #08ff90; outline-width: 7px; outline-color: red; outline-offset: 2px; outline-style: double; } </style> </head> <body> <h2> CSS outline-style property </h2> <h4> outline-style: double </h4> <div class="example ex1"> This div has border: 4px dashed black and outline-style: double </div> </body> </html>

使用 Groove 值的轮廓样式属性

要使元素具有凹槽轮廓,我们使用 **groove** 值。在以下示例中,groove 值已与 **outline-style** 属性一起使用。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .example { margin: 20px; padding: 10px; text-align: center; border: 4px dashed black; background-color: #08ff90; outline-width: 7px; outline-color: red; outline-offset: 2px; outline-style: groove; } </style> </head> <body> <h2> CSS outline-style property </h2> <h4> outline-style: groove </h4> <div class="example ex1"> This div has border: 4px dashed black and outline-style: groove </div> </body> </html>

使用 Ridge 值的轮廓样式属性

要使元素具有凸起轮廓,我们使用 **ridge** 值。在以下示例中,ridge 值已与 **outline-style** 属性一起使用。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .example { margin: 20px; padding: 10px; text-align: center; border: 4px dashed black; background-color: #08ff90; outline-width: 7px; outline-color: red; outline-offset: 2px; outline-style: ridge; } </style> </head> <body> <h2> CSS outline-style property </h2> <h4> outline-style: ridge </h4> <div class="example ex1"> This div has border: 4px dashed black and outline-style: ridge </div> </body> </html>

使用 Inset 值的轮廓样式属性

要使元素具有内嵌轮廓,我们使用 **inset** 值。在以下示例中,inset 值已与 **outline-style** 属性一起使用。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .example { margin: 20px; padding: 10px; text-align: center; border: 4px dashed black; background-color: #08ff90; outline-width: 7px; outline-color: red; outline-offset: 2px; outline-style: inset; } </style> </head> <body> <h2> CSS outline-style property </h2> <h4> outline-style: inset </h4> <div class="example ex1"> This div has border: 4px dashed black and outline-style: inset </div> </body> </html>

使用 Outset 值的轮廓样式属性

要使元素具有外凸轮廓,我们使用 **outset** 值。在以下示例中,outset 值已与 **outline-style** 属性一起使用。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .example { margin: 20px; padding: 10px; text-align: center; border: 4px dashed black; background-color: #08ff90; outline-width: 7px; outline-color: red; outline-offset: 2px; outline-style: outset; } </style> </head> <body> <h2> CSS outline-style property </h2> <h4> outline-style: outset </h4> <div class="example ex1"> This div has border: 4px dashed black and outline-style: outset </div> </body> </html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
outline-style 1.0 8.0 1.5 1.2 7.0
css_properties_reference.htm
广告