共计 1923 个字符，预计需要花费 5 分钟才能阅读完成。
多重边框的两种实现方案：
- border-shadow
- outline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mutiple border</title>
</head>
<body>
<style>
.common {
width: 25vw;
height: 20vh;
margin: 10%;
background: gray;
}
.box-shadow {
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0px 2px 5px 15px hsla(240, 100%, 50%, .5);
}
.inner-box-shadow {
background: white;
box-shadow: inset 0 0 40px hsla(0, 100%, 50%, 1);
}
.outline {border: 2px solid hsla(280, 100%, 50%, 1);
outline: 2px dashed hsla(0, 0%, 100%, 1);
outline-offset: -15px;
border-radius: 10px;
outline-width: 2px;
}
</style>
<div class="common box-shadow"></div>
<div class="common inner-box-shadow"></div>
<div class="common outline"></div>
</body>
</html>box-shadow
以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius，阴影也会有圆角效果。多个阴影的 z -ordering 和多个 text shadows 规则相同 (第一个阴影在最上面)。
/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow:60px -16px teal;
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;指定单个 box-shadow 的用法：
-
给出两个、三个或四个数字值的情况。
- 如果只给出两个值, 这两个值将被浏览器解释为 x 轴上的偏移量 <offset-x> 和 y 轴上的偏移量 <offset-y>。
- 如果给出了第三个值, 这第三个值将被解释为模糊半径的大小 <blur-radius>。
- 如果给出了第四个值, 这第四个值将被解释为扩展半径的大小 <spread-radius>。
- 可选，插页 (阴影向内) inset。
- 可选，颜色值
<color>。 - 声明多个 shadows 时，用逗号将 shadows 隔开。
outline
CSS 的 outline 属性是用来设置一个或多个单独的轮廓属性的简写属性，例如 outline-style, outline-width 和 outline-color。多数情况下，简写属性更加可取和便捷。
轮廓与边框在以下几个方面存在不同：
- 轮廓不占据空间，它们被描绘于内容之上；
- 轮廓可以是非矩形的。在 Gecko/Firefox 中，轮廓是矩形的，但是 Opera 则会围绕元素结构绘制非矩形的形状；
/* 宽度 | 样式 | 颜色 */
outline: 1px solid white;outline-offset：用于设置 outline 与一个元素边缘或边框之间的间隙。
outline 是元素的轮廓，悬浮在元素边框之上。元素和其轮廓之间是透明的。也就是说，它们之间的颜色会继承父元素的背景色。
/* <length> values */
outline-offset: 3px;
outline-offset: 0.2em;
/* Global values */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;
正文完
