精读《CSS揭秘》之背景与边框

 

CSS对于前端工程师来说是基础中的基础，如果基础不扎实，就得日常跪求UED给图来实现效果。

>《CSS揭秘》这本书读来让人有满满的安全感，LEA VEROU 是CSS方面的专家，对CSS3的设计和未来的发展了解很多。描述的47个css技巧也很接地气，值得一读再读。

> 本文是精读《CSS揭秘》系列文章的第一篇，预计有8篇，以一（kan）周（wo）一（xin）篇（qing）的进度发布。

> 如无特殊说明，样式对应的html结构都是 `<div class="box"></div>`

> 由于掘金限制，无法嵌入 iframe 标签，我把 codepen 的示例链接都附在了每一节，方便大家边读边练。

## 半透明边框

> view demo on [codepen](https://codepen.io/youngjuning/pen/KKzKroB)

CSS 背景的工作原理是默认延伸到border区域的，CSS3 中，我们可以使用 `background-clip` 属性来调整这个默认行为带来的不便。将它设为 `padding-box`，便可以不让背景侵入边框所在的范围。

```css
.box {
  border: 10px solid rgba(255,255,255,0.5);
  background: pink;
  background-clip: padding-box;
}
```

<img src="https://i.loli.net/2020/08/09/WzDYntbHJx49kaI.png" style="zoom:50%;" />

## 多重边框

> view demo on [codepen](https://codepen.io/youngjuning/pen/rNeaOob)

### box-shadow 方案

1. 利用 `box-shadow` 属性第四个参数（扩张半径）控制投影面积，其他两个偏移量和模糊半径都设置为。
2. 利用 `box-shadow` 支持逗号分隔的语法，我们可以创建任意数量的投影。

```css
.box {
  width: 100px;
  height: 100px;
  margin: 15px;
  background: yellowgreen;
  border-radius: 5px;
  box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink,
    0 2px 5px 15px rgba(0, 0, 0, 0.6);
}
```


注意：

1. 投影的行为跟外边框不完全一致，因为它不会影响布局