* [**background-clip**](https://www.w3schools.com/cssref/css3_pr_background-clip.asp)：background-clip 的初始值是border-box，即意味着**默认情况下背景会被元素的border box（边框的外沿框）裁切掉**。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉。
```
background-clip: border-box|padding-box|content-box;
```
* [**box-shadow**](https://www.w3schools.com/cssref/css3_pr_box-shadow.asp)：可以**用box-shadow 来生成边框**。box-shadow 接受第四个参数，称作扩张半径，通过指定正值或负值，可以让投影面积加大或者减小。**一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的投影其实就像一道实线边框**。并且它支持逗号分隔语法，可以创建任意数量的投影：
```
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 0 0 15px rgba(0,0,0,.6);
```
需要注意的是：
> - box-shadow 是层层叠加的，第一层投影位于最顶层，依次类推。
> - 投影的行为不同于边框，不会影响布局，不会受到box-sizing 属性的影响，可以通过内边距或外边距来额外模拟出边框所需要占据的空间。
> - 不会响应鼠标事件，比如悬停或点击。可以给box-shadow 属性加上inset 关键字，来使投影绘制在元素的内圈。
* [**outline**](https://www.w3schools.com/cssref/pr_outline.asp)：**outline也可以用来生成边框**。在只需要两层边框的情况下，border + outline 的方案更佳。边框样式更佳灵活并且能产生虚线边框效果，还可以通过**outline-offset 属性来控制它跟元素边缘之间的间距，这个属性甚至可以接受负值**：
```
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
```
* [**background-position**](https://www.w3schools.com/cssref/pr_background-position.asp)：background-position 属性已经得到扩展，它允许我们**指定背景图片距离任意角的偏移量**，只要我们在偏移量前面指定关键字：
```
background-position: right 20px bottom 10px;
```
* [**background-origin**](https://www.w3schools.com/cssref/css3_pr_background-origin.asp)：**默认情况下，background-position 是以padding box 为准的**，可以通过background-clip 这个属性来改变这一默认行为：
```
background-origin: padding-box|border-box|content-box;
```
* [**calc()**](https://www.w3schools.com/cssref/func_calc.asp): 通过calc() 函数来设置长度，需要注意的是**在calc() 函数内部的- 和+ 运算符的两侧各加一个空白符，否则会产生解析错误**：
```
width: calc(100% - 20px);
```
* [**linear-gradient()**](https://www.w3schools.com/cssref/func_linear-gradient.asp)：可以通过linear-gradient() 函数来产生各种复杂的**条纹背景**。
* [**border-image**](https://www.w3schools.com/cssref/css3_pr_border-image.asp)：可以通过这个属性为边框设置背景图案，但是需要知道它的工作原理是**九宫格伸缩法**：把图片切割成九块，然后把它们应用到元素边框相应的边和角。在某些情况下达不到我们的要求。
