共计 1812 个字符，预计需要花费 5 分钟才能阅读完成。
CSS 轮廓。
在表单的学习中，仔细的同学发现了，以后明码框控件取得焦点时，浏览器默认会给它一个蓝色的轮廓，进步用户输出信息的体验。
这个轮廓线是通过给 input 元素增加 border 边框实现的吗？仔细观察，轮廓线向外延长了，然而父元素 div 的高度并没有发生变化。可见，这个轮廓线不是通过 border 实现的。
实际上，这个成果是通过 CSS 轮廓来实现的。轮廓，是在元素四周画的一条线，在边框之外，使元素视觉上 “ 突出 ” 显示。
CSS 轮廓属性包含：outline-style 轮廓款式、outline-color 轮廓色彩、outline-width 轮廓宽度、outline-offset 轮廓偏移、outline 轮廓简写。
首先学习一下 outline-style 轮廓线款式属性，它的值有：
dotted – 定义一个点状轮廓。
dashed – 定义一个虚线轮廓。
solid – 定义一个实线轮廓。
double – 定义一个双线轮廓。
none – 示意无轮廓。
hidden – 定义一个暗藏的轮廓。
在这个已有的 HTML 文件里增加四个 p 元素，别离定义 class 属性值为 a，b，c，d。填入一些文本。再创立一个 outline-style.css 文件，在 html 中引入款式文件。
在 CSS 中，定义 p 选择器，申明款式：border: 5px solid #4CAF50。定义 p.a 选择器，申明款式 outline-style: dotted。定义 p.b 选择器，申明款式 outline-style: dashed。定义 p.c 选择器，申明款式 outline-style: solid。定义 p.d 选择器，申明款式 outline-style: double。
HTML
<p class="a">
一个点状轮廓
</p>
<p class="b">
一个虚线轮廓
</p>
<p class="c">
一个实线轮廓
</p>
<p class="d">
一个双线轮廓
</p>
CSS
p {border: 5px solid #4CAF50;}
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
咱们看，绿色边框外的轮廓线就出现进去了！
接下来学习 outline-width 轮廓线宽度属性，它的值有：
thin：个别为 1px。
medium：个别为 3px。[ˈmiːdiəm]
thick：个别为 5px。[θɪk]
一个特定的尺寸：以 px、em 为单位。比方 10px。
给 p.a 增加款式 outline-width: 20px，给 p.b 增加款式 outline-width: thick，给 p.c 增加款式 outline-width: medium，给 p.d 增加款式 outline-width: thin。
这样，四条轮廓线都有了宽度。
你必定发现了问题，第一个段落轮廓笼罩了其余元素，然而元素的高度并没有发生变化，这就是轮廓与边框不同的中央！轮廓是在元素的边框之外绘制的，并且可能与其余内容重叠。轮廓不是元素尺寸的一部分，元素的总宽度和高度不受轮廓宽度的影响。
接下来学习 outline-color 轮廓线色彩属性，它的值能够是色彩名称、十六进制色彩值或 RGB 色彩值。
给 p.b 增加款式 outline-color: red，
给 p.c 增加款式 outline-color: blue，
给 p.d 增加款式 outline-color: grey。
咱们看，轮廓线有了色彩！
和边框一样，轮廓也能够利用属性简写：outline。它用于设置 outline-width，outline-style，outline-color 三个属性，其中 outline-style 必须设置。
咱们用 outlline 属性批改一下轮廓款式。
第一段落轮廓线款式改为 outline: dotted 20px。
第二个改为 outline: dashed thick red。
第三个改为 outline: solid medium blue。
第四个改为 outline: double thin grey。
再看一下，轮廓线成果是一样的！
最初，咱们学习轮廓线最初一个属性 outline-offset，它用来设置轮廓和元素之间的空隙，这个空隙是通明的。
比方，给 p.c 增加款式 outline-offset: 5px。
此时，这里就有了 5 像素的空隙。
文章配套视频链接：https://www.bilibili.com/vide…