CSS 轮廓(outline)

轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度

所有CSS 轮廓(outline)属性

属性说明CSS版本
outline在一个声明中设置所有的轮廓属性outline-color
outline-style
outline-width
inherit
2
outline-color设置轮廓的颜色color-name
hex-number
rgb-number
invert
 inherit
2
outline-style设置轮廓的样式none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
2
outline-width设置轮廓的宽度thin
medium
thick
length
inherit
2

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p 
{
border:1px solid pink;
outline-color:#24F56C;
outline-style: dotted;
outline-width: bold;
}
</style>
</head>
<body>
<p>HTML中文网</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图: