shkd
snks
一、背景與邊
1、半途明邊框
當頁面中有div，css樣式如下時：
width: 100px;
height: 100px;
/*border: 20px solid hsla(0, 0%, 100%, .5);*/
border: 20px solid rgba(256, 256, 256, .5);
background: #809328;
頁面顯示如圖1：
我們通過使用了一個半透明邊框，可以看出，背景會延伸到邊框所在的區(qū)域下層。即使我們使用了不透明的實色邊框，也不會改變這個事實。但是，我們可以通過background-clip屬性，來調(diào)整上述默認行為帶來的不便。
background-clip的默認值是border-box，意味著背景會被元素邊框的外邊框裁切掉，它還有兩個取值：padding-box 和 content-box。下面我們使用代碼來嘗試一下：
width: 100px;
height: 100px;
border: 20px solid rgba(11, 11, 11, .5);
background: #809328;
padding: 10px;
background-clip: padding-box;
/*background-clip: content-box;*/
為了區(qū)別兩個特性，我們把div增加了padding值，左面的div background-clip 為padding-box，右面的div取值content-box，效果如圖2：
那么，思考，下圖3這樣容器中一層白色背景和一道半透明邊框的圖片，如何形成？
2、多重邊框
我們都使用過box-shadow
box-shadow: 水平陰影的位置 垂直陰影的位置 模糊距離 陰影的尺寸 陰影的顏色 將外部陰影 (outset) 改為內(nèi)部陰影;
并且，可以使用逗號分隔，因此可以創(chuàng)建任意數(shù)量的投影。我們利用這個特性，可以做出多重邊框的效果，如下圖4：
需要注意的是：投影和邊框有所區(qū)別，因為它不會影響布局，而且外部shadow不會響應(yīng)鼠標事件。
在某些情況下可能只需要兩層邊框，那就可以先設(shè)置一層常規(guī)邊框，再加上outline（描邊）屬性來產(chǎn)生外層的邊框。描邊的另一個好處是，可以通過outline-offset設(shè)置它和元素邊緣的間距?？蓪崿F(xiàn)下圖5效果：
3、靈活的背景定位
如果我們想把一個圖片當做背景放在小div的右下角，且向左偏移20px，向上偏移10px，我們要計算出距離div左上角的距離，這樣很不方便。css3中，background-position給出了擴展：
background：url(cute.png) no-repeat #58a;
background-position: right 20px bottom 10px;
此外，還需提供一個回退方案，供不支持該語法的瀏覽器看起來不會很奇怪:
background：url(cute.png) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
在給背景圖片設(shè)置距離某個角偏移時，有一種特殊情況：偏移量與容器的內(nèi)邊距一致，如果采用上面的語法：
padding: 10px;
background：url(cute.png) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
但是如果內(nèi)邊距改變的話，需要改變?nèi)齻€值。每個盒子都包括三個矩形框：border-box、padding-box（內(nèi)邊距的外沿框）、content-box。默認情況下，background-position 以 padding-box 為準，我們可以通過設(shè)置background-origin來改變它，改善后的代碼如下：
padding: 10px;
background：url(cute.png) no-repeat bottom right #58a;
background-origin: content-box;
也可以使用calc（）函數(shù)來表示：
background：url(cute.png) no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
4、邊框內(nèi)圓角
要實現(xiàn)下面圖6效果:
只需要以下樣式：
background: tan;
border-radius: 20px;
box-shadow: 0 0 0 15px #655;
outline: 15px solid #655;
5、條紋背景
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 50px;
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 50px;
為了避免每次改動條紋寬度時都需要修改兩個數(shù)字，我們可以從規(guī)范找到捷徑：
如果某個色標到位置值比整個列表中在它之前的色標的位置值都要小，則該色標的位置值會被設(shè)置為它前面所有色標位置值的最大值。
因此，上面代碼可以改為：
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 50px;
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100px;
33.3%表示0-0.33是黃色，0表示0.33藍色開始，66.6表示藍色結(jié)束，0表示66.6綠色開始
豎直條紋：
background: linear-gradient(to right, #fb3 50%, #58a 0);
斜向條紋：
background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 50px 50px;
background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 50px 50px;
background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
6、復(fù)雜的背景圖案
background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0), linear-gradient(rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;
background: #58a;
background-image: linear-gradient(90deg, white 1px, transparent 0), linear-gradient(white 1px, transparent 0);
background-size: 30px 30px;
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background: #655;
background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0),
linear-gradient(45deg, #bbb 25%, transparent 0, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
