<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 轮廓</title>
<style>
p.a{border: 1px solid red; outline:thick dotted green;}
p.b{border: 1px solid yellow;outline: medium dashed #FF00FF;}
p.c{border: 2px solid green; outline: 3px inset #b0c4de;}
p.d{border: 2px solid rebeccapurple; outline: double #98bf21;}
p.e{border: 2px dashed saddlebrown; outline: 0.1em groove #FF00FF}
</style>
</head>
<body>
<p class="a">一些文本</p>
<p class="b">一些文本</p>
<p class="c">一些文本</p>
<p class="d">一些文本</p>
<p class="e">一些文本</p>
</body>
</html>
<!--
CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度
-->
<!--
outline 在一个声明中设置所有的轮廓属性
outline-color
outline-style
outline-width
inherit
outline-color 设置轮廓的颜色
color-name
hex-number
rgb-number
invert
inherit
outline-style 设置轮廓的样式
none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width 设置轮廓的宽度
thin
medium
thick
length
inherit
-->
<!--
1.outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）
2.outline有可能是非矩形的（火狐浏览器下）
-->
网友评论