CSS大纲。在学习表单的过程中，细心的同学发现，当当前密码框控件获得焦点时，浏览器会默认给它一个蓝色的轮廓，以提高输入信息的用户体验。这个轮廓是通过给input元素加上边框实现的吗？仔细看，轮廓向外延伸，但是父div的高度没有变化。可以看出这条轮廓线并不是通过border实现的。其实这个效果是用CSSoutlines实现的。轮廓是在元素周围绘制的一条线，位于边框之外，使该元素在视觉上“突出”。CSS轮廓属性包括：outline-style轮廓样式、outline-color轮廓颜色、outline-width轮廓宽度、outline-offset轮廓偏移、outline轮廓缩写。先了解一下outline-style轮廓样式属性，它的值是：dotted——定义一个虚线轮廓。dashed-定义虚线轮廓。solid-定义实心轮廓。双-定义双线轮廓。none-表示没有轮廓。hidden-定义一个隐藏的轮廓。在这个已有的HTML文件中添加四个p元素，分别定义class属性值为a、b、c、d。填写一些文字。再创建一个outline-style.css文件导入html中的样式文件。在CSS中，定义p选择器并声明样式：border:5pxsolid#4CAF50。定义p.a选择器并声明样式outline-style:dotted。定义p.b选择器并声明样式outline-style:dashed。定义p.c选择器并声明样式outline-style:solid。定义p.d选择器并声明样式outline-style:double。HTML虚线轮廓
虚线轮廓实线轮廓双线轮廓CSSp{border:5pxsolid#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]粗：一般为5px。[θ?k]一个特定的大小：以px、em为单位。例如10px。添加样式outline-width:20px到p.a，添加样式outline-width:thick到p.b，添加样式outline-width:medium到p.c，添加样式outline-width:thin到p.d.这样，四个轮廓线都有宽度。你一定发现了问题。第一段的轮廓覆盖了其他元素，但元素的高度没有变化。这就是outline和border不同的地方！轮廓绘制在元素的边框之外，可能会与其他内容重叠。轮廓不是元素尺寸的一部分，元素的整体宽度和高度不受轮廓宽度的影响。接下来学习outline-color轮廓颜色属性，它的值可以是颜色名称，十六进制颜色值或者RGB颜色值。添加样式outline-color:red到p.b，添加样式outline-color:blue到p.c，添加样式outline-color:grey到p.d.让我们看看，轮廓线有颜色！和border一样，outline也可以应用属性简写：outline。用于设置outline-width、outline-style、outline-color三个属性，其中必须设置outline-style。让我们用outline属性修改大纲样式。将第一段的轮廓样式改为outline:dotted20px。将第二个更改为轮廓：红色虚线。将第三个更改为轮廓：纯中蓝色。将第四个改成轮廓：双薄灰。再看，轮廓效果是一样的！最后我们学习了轮廓的最后一个属性，outline-offset，用来设置轮廓和元素之间的间隙，是透明的。例如，将样式outline-offset:5px添加到p.c.此时，这里有5个像素的差距。文章配套视频链接：https://www.bilibili.com/video...
