摘要：半透明邊框默認(rèn)情況下，背景會延伸到邊框所在的區(qū)域下層。連續(xù)的圖像邊框思路就是在圖片之上，再疊加一層純白的實(shí)色背景。為了讓下層的圖片背景透過邊框區(qū)域顯示出來，需要給兩層背景指定不同的值。

1.半透明邊框

默認(rèn)情況下，背景會延伸到邊框所在的區(qū)域下層。可以通過background-clip 屬性來調(diào)整。這個屬性的初始值是border-box，意味著背景會被元素的border-box（邊框的外沿框）裁切掉。設(shè)置為padding-box，背景不會透過邊框所在的范圍，覽器就會用內(nèi)邊距的外沿來把背景裁切掉。

border: 10px solid pink;
background: red;
background-clip: padding-box;

效果如下：

2.多重邊框

實(shí)現(xiàn)的辦法入下：
(1) box-shadow的方式
它支持逗號分隔語法，所以可以創(chuàng)建任意數(shù)量的投影。box-shadow會跟隨元素的形狀，元素設(shè)置border-radius時，它會沿著這個圓角顯示

.div {
  width: 40px;
  height: 40px;
  background: yellowgreen;
  box-shadow: 0 0 0 10px #655,
  /* 想在外圈再加一道5px 的外框，那就需要指定擴(kuò)張半徑的值為15px（10px+5px) */
  0 0 0 15px deeppink,
  0 2px 5px 15px rgba(0,0,0,.6);
}

效果如下：

(2)outline實(shí)現(xiàn)方案

outline的實(shí)現(xiàn)只適用于實(shí)現(xiàn)兩層邊框，通過一層border和一層outline

background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;

用outline邊框樣式十分靈活，不像box-shadow 方案只能模擬實(shí)線邊框，假設(shè)我們需要產(chǎn)生虛線邊框效果，box-shadow 就沒辦法了。
outline(描邊) 不會跟隨div的圓角的設(shè)置，還是會顯示直角的樣式

3 靈活的背景定位

(1) background-position
它允許我們指定背景圖片距離任意角的偏移量，只要我們在偏移量前面指定關(guān)鍵字。

/* 背景圖片跟右邊緣保持20px 的偏移量，同時跟底邊保持10px 的偏移量 */
background-position: right 20px bottom 10px;

(2) background-origin
默認(rèn)情況下，background-position 是以padding-box 為準(zhǔn)的，這樣邊框才不會遮住背景圖片。因此，top、left 默認(rèn)指的是padding-box 的左上角

background-origin，可以改變這種行為。在默認(rèn)情況下，它的值是padding-box。如果把它的值改成content-box，在background-position 屬性中使用的邊角關(guān)鍵字將會以內(nèi)容區(qū)的邊緣作為基準(zhǔn)。

每個元素身上都存在三個矩形框，border box（邊框的外沿框）、padding box（內(nèi)邊距的外沿框）和content box（內(nèi)容區(qū)的外沿框）。

background-origin的值分別是上面的三種

4.邊框內(nèi)圓角

實(shí)現(xiàn)方式是使用box-shadow和outline的方式

div {
    background: tan;
    border-radius: .8em;
    padding: 1em;
    box-shadow: 0 0 0 .6em #655;
    outline: .6em solid #655;
}

主要原因是：描邊并不會跟著元素的圓角走（因而顯示出直角），但box-shadow 卻是會的。

5.條紋背景

(1) 水平條紋的實(shí)現(xiàn)

/* 
 *0 會被解析成30%，在css的規(guī)定中如果某個色標(biāo)的位置值比整個列表中在它之前的色標(biāo)的位置值都要小，則該色標(biāo)的位置值會被設(shè)置為它前面所有色標(biāo)位置值的最大值
 * 等同于 background: linear-gradient(#fb3 30%, #58a 30%);
 */
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

(2) 垂直條紋

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%;

(3) 斜向條紋

div {
  background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
}

(4) 靈活的同色系條紋
通過把最深的顏色指定為背景色，同時把半透明白色的條紋疊加在背景色之上來得到淺色條紋。好處是只需要修改一個地方就可以改變所有顏色。

div {
  background-image: repeating-linear-gradient(30deg,
    hsla(0, 0%, 100%, .1),
    hsla(0, 0%, 100%, .1) 15px,
    transparent 0, transparent 30px);
}

6.各種網(wǎng)格背景的實(shí)現(xiàn)

把多個漸變圖案組合起來，讓它們透過彼此的透明區(qū)域顯現(xiàn)時可以創(chuàng)建各種網(wǎng)格圖案。
網(wǎng)格中每個格子的大小可以調(diào)整，而網(wǎng)格線條的粗細(xì)同時保持固定時，就應(yīng)該使用長度而不是百分比作為。舉例來說，類似圖紙輔助線的網(wǎng)格就是這種情況。

div {
  width: 200px;
  height: 200px;
  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;
}

div {
  width: 200px;
  height: 200px;
  background: #58a;
  background-image:
  linear-gradient(white 1px, transparent 0),
  linear-gradient(90deg, white 1px, transparent 0);
  background-size: 30px 30px;
}

div {
    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: 75px 75px, 75px 75px,
    15px 15px, 15px 15px;
}

7.波點(diǎn)效果的實(shí)現(xiàn)

div {
  width: 200px;
  height: 200px;
  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;
}

8.棋盤圖案的漸變

(1)思路是用兩個直角三角形來拼合出方塊，再把第二層漸變在水平和垂直方向均移動貼片長度的一半，就可以把它們拼合成一個完整的方塊。

div {
  width: 200px;
  height: 200px;
  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;
}

(2)svg的方式

svg {
  background: #eee url("data:image/svg+xml,
    ");
  background-size: 30px 30px;
}

9.偽隨機(jī)背景
使用的是 “蟬原則”，就是通過質(zhì)數(shù)來增加隨機(jī)真實(shí)性。比如設(shè)計一個沒有規(guī)律的線性漸變就可以使用這種方式。

.random {
  width: 200px;
  height: 200px;
  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 41px, transparent 0);
  background-size: 41px 100%, 61px 100%, 83px 100%;
}

這種蟬原則，同樣適用于：
(1) 在照片圖庫中，為每幅圖片應(yīng)用細(xì)微的偽隨機(jī)旋轉(zhuǎn)效果時，可以使用多個:nth-child(a) 選擇符，且讓a 是質(zhì)數(shù)。
?(2) 如果要生成一個動畫，而且想讓它看起來不是按照明顯的規(guī)律在循環(huán)時，我們可以應(yīng)用多個時長為質(zhì)數(shù)的動畫。

8.連續(xù)的圖像邊框

思路就是在圖片之上，再疊加一層純白的實(shí)色背景。為了讓下層的圖片背景透過邊框區(qū)域顯示出來，需要給兩層背景指定不同的background-clip 值。最后一個要點(diǎn)在于，在多重背景的最底層設(shè)置背景色，需要用一道從白色過渡到白色的CSS 漸變來模擬出純白實(shí)色背景的效果。

.border-img {
  width: 200px;
  height: 200px;
  padding: 1em;
  border: 1em solid transparent;
  background: linear-gradient(white, white), url(dog.jpg);
  background-size: cover;
  background-clip: padding-box, border-box;
  background-origin: border-box;
}

這個技巧同樣適合漸變的圖案。比如：信封的樣式。

div {
  width: 200px;
  height: 100px;
  padding: 16px;
  border: 16px 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;
}

還可以實(shí)現(xiàn)虛線滾動框

@keyframes ants {
  to {
    background-position:  100%;
  }
}
.dotted{
  margin-top: 20px;
  margin-bottom: 20px;
  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;
}