半透明邊框
RGBA/HSLA顏色
H：Hue(色調)。0(或360)表示紅色裁僧，120表示綠色贴届，240表示藍色，也可取其他數(shù)值來指定顏色震桶。取值為：0 - 360
S：Saturation(飽和度)休傍。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%
A：Alpha透明度蹲姐。取值0~1之間磨取。
border: 10px solid hsla(0,0%,100%,0.5);
background: white;
background-clip: padding-box; // 瀏覽器會用內(nèi)邊距的外沿來把背景裁切掉
多重邊框
box-shadow接受第四個參數(shù)（稱作“擴張半徑”），通過指定正值或負值淤堵，可以讓投影面積加大或者減小寝衫。一個正值的擴張半徑加上兩個為零的偏移量以及為零的模糊值顷扩，得到的“投影”其實就像一道實現(xiàn)邊框拐邪。
background: yellowgreen;
box-shadow: 0 0 0 10px #655;
不過 box-shadow 的好處在于， 它支持逗號分隔語法隘截， 我們可以創(chuàng)建任意數(shù)量的投影扎阶。因此汹胃， 我們可以非常輕松地在上面的示例中再加上一道 deeppink 顏色的“邊框”
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
注：box-shadow是層層疊加的，第一層投影位于最頂層东臀，以此類推着饥，因此需要按照此規(guī)律調整擴張半徑。比如說惰赋， 在前面的代碼中宰掉， 我們想在外圈再加一道 5px 的外框， 那就需要指定擴張半徑的值15px(10px+5px)
加投影的box-shadow
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,.6);
outline（描邊）方案
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
可以通過 outline-offset 屬性來控制它跟元素邊緣之間的間距赁濒， 這個屬性甚至可以接受負值轨奄。只適用于雙層“邊框”的場景（若多層邊框則使用box-shadow）,邊框不一定會貼合 border-radius 屬性產(chǎn)生的圓角。
background: yellowgreen;
border: 10px solid #655;
border-radius: 10px;
outline: 1px dashed white;
outline-offset: -5px;
靈活的背景定位
background-position的擴展
允許指定背景圖片距離任意角的偏移量拒炎，只要在偏移量前面指定關鍵字挪拟。跟右側保持20px的偏移量同時跟底部保持10px的偏移量如下：
background: url(code-pirate.svg) no-repeat #58a;
background-position: right 20px bottom 10px;
回退方案
background: url(code-pirate.svg)
no-repeat bottom right #58a;
background-position: right 20px bottom 10px;
background-origin方案
將background-origin設置為content-box，會使偏移量跟padding的值相同击你。若有不同的玉组，可以配合background-position的擴展語法來設置額外的偏移量。
padding: 10px;
background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */
background-origin: content-box;
calc()方案
按照左上角思路來想丁侄，需要計算對左上角的偏移量惯雳，可以使用calc()計算相對于左上角的偏移量。
background: url("code-pirate.svg") no-repeat;
background-position: calc(100% - 20px) calc(100% - 10px);
注：請不要忘記在calc()函數(shù)內(nèi)部的 - 和 + 運算符的兩側各加一個空白符鸿摇，否則會產(chǎn)生解析錯誤吨凑！
邊框內(nèi)圓角
難題
一個容器，只在內(nèi)側有圓角户辱，而邊框或描邊的四個角在外部仍然保持直角的形狀鸵钝。用兩個元素可以實現(xiàn)此效果。
<div class="something-meaningful"><div>
I have a nice subtle inner rounding,
don't I look pretty?
</div></div>
.something-meaningful {
background: #655;
padding: .8em;
}
.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
}
將box-shadow和outline結合使用庐镐，可以實現(xiàn)邊框內(nèi)圓角的效果恩商。box-shadow的擴張半徑要比描邊的寬度值小，但同時又要比(根號2-1)r大(r表示border-radius)
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
條紋背景
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;
// to right 或者 90deg
background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;
background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;
background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);
復雜的背景圖案
background: #58a;
background-image: linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 50px 50px, 50px 50px,
10px 10px, 10px 10px;
background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
波點的mixin代碼 -- SCSS
@mixin polka($size, $dot, $base, $accent) {
background: $base;
background-image:
radial-gradient($accent $dot, transparent 0),
radial-gradient($accent $dot, transparent 0);
background-size: $size $size;
background-position: 0 0, $size/2 $size/2;
}
// 調用
@include polka(30px, 30%, #655, tan);
棋盤
background: #eee;
background-image:
linear-gradient(45deg,
rgba(0,0,0,.25) 25%, transparent 0,
transparent 75%, rgba(0,0,0,.25) 0),
linear-gradient(45deg,
rgba(0,0,0,.25) 25%, transparent 0,
transparent 75%, rgba(0,0,0,.25) 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
棋盤的mixin代碼 -- scss
@mixin checkerboard($size, $base,
$accent: rgba(0,0,0,.25)) {
background: $base;
background-image:
linear-gradient(45deg,
$accent 25%, transparent 0,
transparent 75%, $accent 0),
linear-gradient(45deg,
$accent 25%, transparent 0,
transparent 75%, $accent 0);
background-position: 0 0, $size $size,
background-size: 2*$size 2*$size;
}
/* 調用時是這樣的…… */
@include checkerboard(15px, #58a, tan);
棋盤的svg實現(xiàn)代碼
<svg xmlns="http://www.w3.org/2000/svg"
width="100" height="100" fill-opacity=".25" >
<rect x="50" width="50" height="50" />
<rect y="50" width="50" height="50" />
</svg>
<!-- 調用 -->
background: #eee url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="100" height="100" \
fill-opacity=".25">\
<rect x="50" width="50" height="50" /> \
<rect y="50" width="50" height="50" /> \
</svg>');
background-size: 30px 30px;
請注意必逆，如果你出于可讀性的考慮怠堪，需要把一句CSS代碼打斷為多行，只需要用反斜杠（\）來轉義每行末尾的換行就可以了名眉。
偽隨機背景
background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 23px, transparent 0);
background-size: 83px 100%, 61px 100%, 41px 100%;
使用質數(shù)來指定各組條紋的寬度粟矿，增加各組條紋寬度的隨機真實性。相對質數(shù)是一種數(shù)字之間的關系损拢， 而不是單個數(shù)字自身的屬性陌粹。 構成相對質數(shù)的這些數(shù)字沒有公約數(shù)， 但它們自己是可以有多個約數(shù)的（ 比如說福压， 10 和 27 是相對質數(shù)掏秩， 但它們都不是質數(shù)）或舞。 很顯然， 一個質數(shù)跟其他所有數(shù)字都可以構成相對質數(shù)蒙幻。
連續(xù)的圖像邊框
border-image的工作原理
基本上就是九宮格伸縮法： 把圖片切割成九塊映凳， 然后把它們應用到元素邊框相應的邊和角。
解決方案
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white),
url(stone-art.jpg);
background-size: cover;
background-clip: padding-box, border-box;
background-origin: border-box;
合并簡寫為：
padding: 1em;
border: 1em solid transparent;
background:
linear-gradient(white, white) padding-box,
url(stone-art.jpg) border-box 0 / cover;
也適用于漸變圖案邮破，下面的可以實現(xiàn)一種老式信封樣式的邊框诈豌。
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
red 0, red 12.5%,
transparent 0, transparent 25%,
#58a 0, #58a 37.5%,
transparent 0, transparent 50%)
0 / 5em 5em;
也可以使用border-image來實現(xiàn)。
padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg,
red 0, red 1em,
transparent 0, transparent 2em,
#58a 0, #58a 3em,
transparent 0, transparent 4em);
不過 border-image 方法存在一些問題抒和。
- 每當我們改變 border-image-slice時队询，都需要同時修改borderwidth來讓它們相互匹配。
- 由于我們不能在 border-image-slice 屬性中使用 em 單位构诚， 只能把邊框厚度指定為像素單位蚌斩。
- 條紋的寬度需要在色標的位置信息中寫好，因此我們在改變條紋寬度時范嘱， 需要修改四處送膳。
螞蟻行軍效果
@keyframes ants { to { background-position: 100% } }
.marching-ants {
padding: 1em;
border: 1px solid transparent;
background:
linear-gradient(white, white) padding-box,
repeating-linear-gradient(-45deg,
black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
animation: ants 12s linear infinite;
}
頂部邊框的裁切效果，用來模擬傳統(tǒng)的腳注
border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg,
currentColor 4em,
transparent 0);
padding-top: 1em;
