CSS Secret——Backgrounds & Borders

透明邊框

如果我們想要一個白色背景和半透明白的邊框我們該怎麼辦呢~
如果你對邊框和背景的關係不太瞭解：

border: 10px solid hsla(0,0%,100%,.5); 
background: white;

這樣你是看不到透明邊框的，因爲背景本身是會鋪到邊框裏的。
使用background-clip: padding-box;可以使背景只鋪到內邊距。

border: 10px solid rgba(255, 0, 255, 0.3);
background: white;
background-clip: padding-box;

多重邊框

使用陰影

之前都用好幾個元素套起來的辦法來實現多重邊框，其實使用多個陰影就能實現。

#muti-border{
  height:20px;
  background: yellowgreen;
  margin:15px;
  box-shadow: 0 0 0 10px #655,
  0 0 0 15px deeppink,
  0 2px 5px 15px rgba(0,0,0,.6);
}

這樣每個陰影都會顯示併疊起來，就像多個邊框了。
這裏有個問題要注意，陰影不同於border，它的寬度是不在盒模型中的，也就是說你的假陰影可能會覆蓋在別的元素上。你可以使用和陰影相同寬度的內邊距和外邊距來模擬這一點（你的陰影如果是往裏疊的就要使用內邊距了）。往裏疊有個好處，就是這個元素的點擊，鼠標進入等事件在你的假邊框上都會觸發。但是如果你是往外疊的，那這個元素上的事件在假邊框上就觸發不了了。

使用outline

如果你只需要兩個邊框，可以使用outline來模擬。這個outline不僅可以設置與元素邊界的距離（正負都行），還可以設置像border一樣的style，剛纔的方法只能模擬solid。

 #outline-border{
    background: #655;
    border: 10px solid #655;
    outline: 1px dashed #fff;
    outline-offset:-15px;
    height:100px;
    width:200px;
    border-radius: 10px;
    color:#fff;
    margin:30px;
    padding:10px;
}

這個方法最大的限制就是outline只能有一個。
還有一個問題就是outline不貼着圓角，它永遠是方的。

靈活的背景位置

我們現在在設置background-position時使用的一般是關鍵字和相對左上角的偏移量。
想象這樣一個使用場景，一個寬高不定的div，我們想讓一個背景相對右下角有一個固定的位置，但要有一點距離不貼邊。
啊哦。

拓展background-position

在CSS Backgrounds & Borders Level 3中，在關鍵詞後提供偏移量可以指定從哪裏偏移。不過，爲了兼容老的瀏覽器，要提供回滾值哦。

#background{
  background: url(../img/marker_red.png) no-repeat bottom right #58a;
  background-position: right 20px bottom 10px;
  height:100px;
}

background-origin方案

當我們規定background-position時的相對位置由這個屬性來控制，默認爲padding box，如果改爲content-box就可以使用padding來直接控制background相對於外面的距離了。

padding: 10px; background: url(../img/marker_red.png) no-repeat #58a bottom right; /* or 100% 100% */
background-origin: content-box;

同樣，現在在關鍵字後加上offset還是可以繼續調整的。

使用calc()

這個神奇的函數可以跨單位的計算值哦。

background: url("code-pirate.svg") no-repeat; 
background-position: calc(100% - 20px) calc(100% - 10px);

內部圓角

我們有時需要一個外圓內方的元素~~
使用兩個div來達成目標很容易，但是這嗎，明明應該是一個元素呀。
我們首先使用outline永遠是矩形不跟隨邊框圓角的特性。

#rect-round{
  background: tan;
  border-radius: .8em;
  padding: 1em;
  outline: .7em solid #655;
  margin:20px;
  width:20%;
}

這樣就在圓角的元素外面套了一個矩形的框，但是這裏會有個問題，圓角和框之間的空隙是沒有被填上的。
這時就使用不帶模糊的box-shadow，這個是會貼合圓角的。outline和box-shadow都不佔框模型，它們會重合，這樣圓角和框之間的縫就填上了。

#rect-round{
  background: tan;
  border-radius: .8em;
  padding: 1em;
  box-shadow: 0 0 0 .6em #655;
  outline: .7em solid #655;
  margin:20px;
  width:20%;
}

條紋背景

創建條紋背景以前從來都是使用圖片來解決的。
不過其實我們可以使用漸變背景來達成目的。
linear-gradient這個東西其實就是個由瀏覽器解析生成的背景圖片。
利用這一點：

水平條紋

#striped{
  height:200px;
  background: linear-gradient(#fb3 50%, #58a 50%);
  background-size: 100% 30px;
}

這裏我們創建了一個毫無過渡的，30px高的線性過度背景，因爲背景是可以repeat的，所以就有了全背景的條紋效果。
通過這樣設置可以創建不均勻的條紋：

#striped{
  height:200px;
  background: linear-gradient(#fb3 30%, #58a 0%);
  background-size: 100% 30px;
}

多個條紋：

#striped{
  height:200px;
  background: linear-gradient(#fb3 33.3%,
          #58a 33.3%, #58a 66.6%, yellowgreen 66.6%);
  background-size: 100% 45px;
}

垂直條紋

垂直條紋就是使用有角度的線性漸變

#striped{
  height:200px;
  background: linear-gradient(to right, /* or 90deg */
          #fb3 50%, #58a 0);
  background-size: 30px 100%;
}

傾斜條紋

#striped{
  height:200px;
  background: repeating-linear-gradient(60deg,
          #fb3 0, #fb3 15px, #58a 0, #58a 30px);
}

使用透明色來更靈活的創建條紋

有時我們創建的條紋只有細微的差別，那麼使用純色背景加半透明條紋就很方便改主題，而且對不支持漸變的瀏覽器還很方便的提供了一個fallback。

#striped{
  height:200px;
  background: #58a;
  background-image: repeating-linear-gradient(30deg,
          hsla(0,0%,100%,.1),
          hsla(0,0%,100%,.1) 15px,
          transparent 0, transparent 30px);
}

複雜背景

網格

同時使用垂直和水平，可以創造出很神奇的效果呢～

#grid1{
  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;
}
#grid2{
  height:200px;
  background: #58a;
  background-image:
          linear-gradient(white 1px, transparent 0),
          linear-gradient(90deg, white 1px, transparent 0);
  background-size: 30px 30px;
}
#grid3{
  height:200px;
  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;
}

點點嗷

如果需要點點的背景，使用radial-gradient來創建是很不錯的呦。
這裏使用了sass，這樣可以創建不同的各種各樣的點點

@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;
}
#dot{
  height:200px;
  @include polka(50px, 20%, #655, tan);
}

西洋棋盤

這個直接通過方塊並不很好實現，通過把方塊分成兩個三角形比較好實現。

background-image:
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px,
                     15px 15px, 30px 30px;
background-size: 30px 30px;

進一步合併，使用sass：

@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的話會更方便：

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;

僞隨機背景

利用素數，使重複的區間足夠長，達到隨機條紋的目的

#random{
  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%;
}

連續的圖片邊框

我們想讓內容浮在一張圖片上，這張圖片就像是內容的邊框一樣。
border-image可是實現不了的哦。

#border-image{
  padding: 1em;
  border: 1em solid transparent;
  background: linear-gradient(white, white),url(../img/stone-art.jpg);
  background-size: cover;
  background-clip: padding-box, border-box;
  background-origin: border-box;
}

同樣的原理，可以用來模擬信封邊框的樣式：

#border-image1{
  height: 200px;
  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;
}

配合動畫，可以做出想ps裏選區虛線框那樣的動畫。

@keyframes ants { to { background-position: 100% } }
#border-image2 {
  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 120s linear infinite;
}