css邊框與背景

1.半透明邊框

默認狀況下，背景會延伸到邊框所在的區域下層。能夠經過background-clip 屬性來調整。這個屬性的初始值是border-box，意味着背景會被元素的border-box（邊框的外沿框）裁切掉。設置爲padding-box，背景不會透過邊框所在的範圍，覽器就會用內邊距的外沿來把背景裁切掉。

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

效果以下：

2.多重邊框

實現的辦法入下：
(1) box-shadow的方式
它支持逗號分隔語法，因此能夠建立任意數量的投影。box-shadow會跟隨元素的形狀，元素設置border-radius時，它會沿着這個圓角顯示

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

效果以下：

(2)outline實現方案

outline的實現只適用於實現兩層邊框，經過一層border和一層outline

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

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

3 靈活的背景定位

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

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

(2) background-origin
默認狀況下，background-position 是以padding-box 爲準的，這樣邊框纔不會遮住背景圖片。所以，top、left 默認指的是padding-box 的左上角

background-origin，能夠改變這種行爲。在默認狀況下，它的值是padding-box。若是把它的值改爲content-box，在background-position 屬性中使用的邊角關鍵字將會之內容區的邊緣做爲基準。

每一個元素身上都存在三個矩形框，border box（邊框的外沿框）、padding box（內邊距的外沿框）和content box（內容區的外沿框）。

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

4.邊框內圓角

實現方式是使用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) 水平條紋的實現

/* 
 *0 會被解析成30%，在css的規定中若是某個色標的位置值比整個列表中在它以前的色標的位置值都要小，則該色標的位置值會被設置爲它前面全部色標位置值的最大值
 * 等同於 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.各類網格背景的實現

把多個漸變圖案組合起來，讓它們透過彼此的透明區域顯現時能夠建立各類網格圖案。
網格中每一個格子的大小能夠調整，而網格線條的粗細同時保持固定時，就應該使用長度而不是百分比做爲。舉例來講，相似圖紙輔助線的網格就是這種狀況。

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.波點效果的實現

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 xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25" >
</svg>

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;
}

9.僞隨機背景
使用的是 「蟬原則」，就是經過質數來增長隨機真實性。好比設計一個沒有規律的線性漸變就能夠使用這種方式。

.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) 在照片圖庫中，爲每幅圖片應用細微的僞隨機旋轉效果時，能夠使用多個:nth-child(a) 選擇符，且讓a 是質數。
„(2) 若是要生成一個動畫，並且想讓它看起來不是按照明顯的規律在循環時，咱們能夠應用多個時長爲質數的動畫。

8.連續的圖像邊框

思路就是在圖片之上，再疊加一層純白的實色背景。爲了讓下層的圖片背景透過邊框區域顯示出來，須要給兩層背景指定不一樣的background-clip 值。最後一個要點在於，在多重背景的最底層設置背景色，須要用一道從白色過渡到白色的CSS 漸變來模擬出純白實色背景的效果。

.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;
}

還能夠實現虛線滾動框

@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;
}