8. 轮廓样式

轮廓样式 outline

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

<div style="box-sizing: border-box; width:50%; border:2px solid black; outline:#99ccff solid 10px; padding:20px; margin:50px auto; text-align:center;">
        此元素拥有黑色边框和蓝色轮廓，宽度为 10px。
</div>

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

CSS 拥有如下常用轮廓属性：

• outline-style
• outline-color
• outline-width
• outline

.box {
       width: 300px;
       height: 50px;
       margin: 50px auto;
       border: 10px dashed red;
       /* 轮廓线宽度 */
       outline-width:20px;
       /* 轮廓线样式 */
       outline-style: solid ;
       /* 轮廓线颜色 */
       outline-color: pink;
       /* 简写形式: 宽度 样式 颜色 */
       outline: 20px solid pink;
     }

<div class="box">红色虚线边框10px,粉色实线轮廓线20px</div>

表单自带轮廓线,我们在制作网页的过程中,通常需要把表单中的轮廓线去掉

<input type="text" style="outline:none">