outline

在inout和button点击时，默认带有蓝色的边框，很不美观，可以用outline:none来去除边框。那么接下来就看一看outline这个属性
---------------------------------我是分割线----------------------------------------------

一：概念

outline属性是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

1. outline的默认值：invert none medium
2. 可以按顺序设置如下属性：
   outline-color 可以设置成任何颜色
   outline-style 样式可以是以下取值
   outline-width 可以设置以下的宽度

outline-style的可能取值

outline-style.png

outline-width的宽度设置如下

• thin 细的
• medium 中等的
• thick 粗的
• width 自定义宽度

二：实例

1. 实现两个边框

hello world
p{
    width: 100px;
    border: 3px solid yellow;
    outline: green dotted 3px;
}

结果：在边框外部添加了一个点状的边框。
2. 拓展：实现多个边框的代码

.box-shadow{
    width: 100px;
    height: 100px;
    box-shadow: 0 0 0 1px red,
                0 0 0 2px green,
                0 0 0 3px yellow;
}

解析：这5个参数依次代表：x轴的偏移量，y轴的偏移量，模糊程度，从边框开始向外的宽度，阴影颜色