* [**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)：可以通過這個屬性為邊框設置背景圖案，但是需要知道它的工作原理是**九宮格伸縮法**：把圖片切割成九塊，然后把它們應用到元素邊框相應的邊和角。在某些情況下達不到我們的要求。
