CSS（九）——CSS 轮廓（outline）
CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
让我们用一个图来看一下：
光看图还不行，接下来让我们看几个例子：
在元素周围画线
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作示例</title>
<style>
p.a {
border: 1px solid red;
outline: green dotted thick;
}
p.b {
border-style: solid;
border-width: medium;
border-color: #98bf21;
}
p.c {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="a">飞流直下三千尺</p>
<p class="b">疑是银河落九天</p>
<p class="c">一日看尽长安花</p>
</body>
</html>运行结果：
设置轮廓的样式
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作示例</title>
<style>
p.a {
border: 1px solid red;
outline: green dotted thick;
}
p.b {
border-style: solid;
outline-style: dotted;
}
p.c {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="a">飞流直下三千尺</p>
<p class="b">疑是银河落九天</p>
<p class="c">一日看尽长安花</p>
</body>
</html>运行结果：
设置轮廓的颜色
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作示例</title>
<style>
p.a {
border: 1px solid red;
outline: green dotted thick;
}
p.b {
border-style: solid;
outline-style: dotted;
outline-color: #00ff00;
}
p.c {
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<p class="a">飞流直下三千尺</p>
<p class="b">疑是银河落九天</p>
<p class="c">一日看尽长安花</p>
</body>
</html>运行结果：
设置轮廓的宽度
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作示例</title>
<style>
p.a {
border: 1px solid red;
outline: green dotted thick;
}
p.b {
border-style: solid;
outline-style: dotted;
outline-color: #00ff00;
}
p.c {
border-style: solid;
outline-width: 3px;
}
</style>
</head>
<body>
<p class="a">飞流直下三千尺</p>
<p class="b">疑是银河落九天</p>
<p class="c">一日看尽长安花</p>
</body>
</html>运行结果：
所有CSS 轮廓（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 |
outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint
原文地址：https://blog.csdn.net/m0_62701594/article/details/140701646
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！