一、CSS 轮廓（outline 属性）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
二、属性
2.1 outline-style 属性
设置轮廓的样式
- none默认。定义无轮廓。
- dotted定义点状的轮廓。
- dashed定义虚线轮廓。
- solid定义实线轮廓。
- double定义双线轮廓。双线的宽度等同于 outline-width 的值。
- groove定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
- ridge定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
- inset定义 3D 凹边轮廓。此效果取决于 outline-color 值。
- outset定义 3D 凸边轮廓。此效果取决于 outline-color 值。
- inherit规定应该从父元素继承轮廓样式的设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p {
border: red solid thin;
}
p.none{
outline-style: none
}
p.dotted {
outline-style: dotted
}
p.dashed {
outline-style: dashed
}
p.solid {
outline-style: solid
}
p.double {
outline-style: double
}
p.groove {
outline-style: groove
}
p.ridge {
outline-style: ridge
}
p.inset {
outline-style: inset
}
p.outset {
outline-style: outset
}
</style>
</head>
<body>
<p class="none">定义无轮廓。</p>
<p class="dotted">定义点状的轮廓。</p>
<p class="dashed">定义虚线轮廓。</p>
<p class="solid">定义实线轮廓。</p>
<p class="double">定义双线轮廓。双线的宽度等同于 outline-width 的值。</p>
<p class="groove">定义 3D 凹槽轮廓。此效果取决于 outline-color 值。</p>
<p class="ridge">定义 3D 凸槽轮廓。此效果取决于 outline-color 值。</p>
<p class="inset">定义 3D 凹边轮廓。此效果取决于 outline-color 值。</p>
<p class="outset">定义 3D 凸边轮廓。此效果取决于 outline-color 值。</p>
</body>
</html>
2.2 outline-color 属性
设置轮廓的颜色。
注释：请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。 注释：轮廓线不会占据空间，也不一定是矩形。 outline-color 属性设置一个元素整个轮廓中可见部分的颜色。要记住，轮廓的样式不能是 none，否则轮廓不会出现。
<!DOCTYPE html>
<!--
作者：2584966199@qq.com
时间：2020-03-17
描述：
outline-color 属性设置一个元素整个轮廓中可见部分的颜色。要记住，轮廓的样式不能是 none，否则轮廓不会出现。
请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
p {
border: red solid thin;
outline-style: dotted;
outline-color: #00ff00;
}
</style>
</head>
<body>
<p><b>注释：</b>在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。</p>
</body>
</html>
2.3 outline-width 属性
outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。
outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性设置元素周围的轮廓线。
注释：请始终在 outline-width 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
注释：轮廓线不会占据空间，也不一定是矩形。
<!DOCTYPE html>
<!--
作者：2584966199@qq.com
时间：2020-03-17
描述：
outline-width 属性设置元素整个轮廓的宽度，
只有当轮廓样式不是 none 时，这个宽度才会起作用。
如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。
-->
<html>
<head>
<meta charset="UTF-8">
<title>outline-width属性</title>
<style>
p.one {
border: red solid thin;
outline-style: solid;
outline-width: thin;
}
p.two {
border: red solid thin;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<p class="one">这是一个实线轮廓</p>
<p class="two">这是一个点状轮廓</p>
</body>
</html>
网友评论