CSS2样式表(属性·轮廓)

最新推荐文章于 2022-03-27 16:07:42 发布

原创最新推荐文章于 2022-03-27 16:07:42 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

文章标签：

28 篇文章

订阅专栏

本文详细介绍了CSS中的轮廓(outline)属性及其子属性，包括outline-color、outline-style和outline-width等，通过实例展示了如何设置元素的轮廓颜色、样式及宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、outline

语法：
outline : outline-color || outline-style || outline-width
取值：
该属性是复合属性。请参阅各参数对应的属性。

说明：
设置或检索对象外的线条轮廓。外轮廓( outline )画在边框( border )外面，并且不一定是矩形。
对应的脚本特性为 outline 。

示例：

img { outline: red }
p { outline: double 5px }
button { outline: #E9E9E9 double thin }

2、outline-color

语法：
outline-color : color | invert
取值：
color : 指定颜色。请参阅颜色单位和附录：颜色表
invert : 默认值。使用背景色的反色

说明：
设置或检索对象外的线条轮廓( outline )的颜色。参见属性。
对应的脚本特性为 outlineColor 。

示例：

img { outline-color: red }
p { outline-color: #E9E9E9 }

3、outline-style

说明：
设置或检索对象外的线条轮廓( outline )的样式。
对应的脚本特性为 outlineStyle 。

示例：

img { outline-color: orange; outline-style: solid ; outline-width: medium ; }

4、outline-width

语法：
outline-width : medium | thin | thick | length
取值：
medium : 默认值。默认宽度
thin : 小于默认宽度
thick : 大于默认宽度
length : 由浮点数字和单位标识符组成的长度值。不可为负值。请参阅长度单位

说明：
设置或检索对象外的线条轮廓( outline )的宽度。
对应的脚本特性为 outlineWidth 。

示例：

img { outline-color: orange; outline-style: solid ; outline-width: medium ; }