CSS背景與邊框

---

title: 背景與邊框
date: 2016-10-16
tags: CSS Secrets

---

0x00 半透明邊框

---

背景知識 RGBA/HSLA 顏色

在CSS3裏咱們可使用RGBA和HSLA兩種色彩模式，兩者都可以用來在設置顏色的同時指定其它透明度。RGBA指的是「紅色、綠色、藍色和Alpha透明度」，而HSLA則表明「色調、飽和度、亮度和Alpha透明度」。

在RGBA模式裏，前三個參數分別是紅色、綠色和藍色的強度值，取值從 0~255 或 0%~100% （最多見的是 0~255， 而非百分數形式）。而在HSLA模式裏，前三個參數則分別表明色調（ 0~360 ）、飽和度（ 0%-100% ）和亮度（ 0%~100% ）。RGBA和HSLA第四個參數都是透明度，取值從0（徹底透明）到1（徹底不透明）。

CSS3仍有opacity屬性，但它的做用是使整個元素都半透明，包括前景內容，而不只是背景。

---

解決方案

須要知道的是，在默認狀況下，背景會延伸到邊框所在區域的下層。因此即便咱們給邊框設置了半透明的效果，那麼從視覺上也是沒法分辨的。因此,若是咱們不但願背景侵入邊框所在的範圍，就須要使用到 CSS3 的 background-clip 背景切割屬性，將它的值設置爲 padding-box。

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

---

0x01 多重邊框

---

box-shadow

鮮爲人知的是，box-shadow 還能夠接受第四個參數(稱爲"擴展半徑")，經過指定正值或者負值，可讓投影面積加大或者減少。

一個正值的擴展半徑加上兩個爲零的偏移量以及爲零的模糊值，獲得的投影其實就像是一道實線邊框了，在加上 box-shadow 的最大好處，能夠支持逗號分隔發法，那麼咱們即可覺得其建立任意數量的投影了。

div{
    height: 200px;
    width: 200px;
    background: yellowgreen;
    box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0, 0.6);
}

---

outline

有時當咱們只須要兩層邊框的時候，即可以使用 outline 屬性來產生外層的邊框，這種方案會變得很是靈活，而不一樣於 box-shadow 只能模擬實現邊框。

div{
            height: 200px;
            width: 200px;
            border: 20px solid #655;
            border-radius: 10px;
            outline:  5px dashed deeppink;        
}

描邊的另外一屬性 outline-offset 還能夠控制它更元素邊緣之間的間距，這個屬性能夠接受負值。

div{
            height: 200px;
            width: 200px;
            border: 20px solid #655;
            border-radius: 10px;
            outline:  5px dashed deeppink;            
            outline-offset: -25px;
        }

可是，IE8 如下的並不支持 outline-offset 屬性。

去掉 input 標籤 focus 時的亮色邊框 input {outline:none}

---

0x02 背景定位

---

背景定位

有時，咱們但願背景圖片與容器的邊角之間留出必定的空隙(相似內邊距的效果)，在 CSS2 的時代要實現這一點是很麻煩的。可是在 CSS3 的時代 background-position 屬性已經獲得了很好的擴展，而且當結合 background-origin 屬性使用時，將發揮出更大的創造力。

在 CSS3 中，background-position 容許咱們指定背景圖片距離任意角的偏移量，只需咱們在偏移量前指定關鍵字就行了。

須要知道的是，background-position 在默認狀況下是以 padding-box 爲基準的，不過，咱們可使用 CSS3 中一個新的屬性 background-origin 來改變這種默認行爲。background-origin 默認值一樣爲 padding-box，其它能夠接受的值是，content-box 和 border-box。

#box{
        width:500px;
    height:500px;
    border:20px solid rgba(0,0,0,0.5);            
    background: url(img/adver2.jpg) no-repeat ;
    /*background-clip:content-box;    */    
    background-position: right 20px bottom 10px;
    background-origin: content-box;
    padding:40px;
}

如此，咱們在 background-position 中使用的邊角關鍵字將會之內容區的邊緣做爲基準。

---

0x03 邊框內圓角

一個靈活的方法是使用兩個嵌套的 div 來實現邊框內圓角的效果。

#box{
  background:#655;
  padding:0.8em;
}

#subBox {
    background: tan;
    padding:0.8em;
    border-radius:0.8em;
}

---

0x04 條紋背景

---

背景知識 CSS3 漸變中的百分比

在 CSS 漸變屬性中使用百分比的做用是指某個顏色距離起點的起始位置。默認的漸變樣式爲從上往下，因此當某個顏色值設置了百分比後，便會從距離頂端相關的距離（百分比計算）開始填充實色。而漸變是也有空間佔比的，漸變過渡區的佔比爲總的空間(高度或寬度)減去上下兩個着色塊空間佔比剩下的空間。

紅色30% 橙色70%的漸變過渡佔比爲

但如果前面有比當前的顏色值百分比大的，會自動將當前顏色值的百分比設置爲前面顏色中的最大百分比值。

此外，默認狀況下，還會根據顏色的個數來爲每一個顏色設置百分比，最後一個顏色的百分比值就是100%，而起始的值就是0%，中間若是再有多個顏色值，則根據100/（個數-1）平均下去。

如此，即可以作出一個簡單的多重顏色線條的背景來:

#box{
            width:400px;
            height:200px;    
            background:linear-gradient(
                red 0,
                red 14.3%,
                orange 0,
                orange 28.6%,
                yellow 0,
                yellow 42.9%,
                green 0,
                green 57.2%,
                blue 0,
                blue 71.5%,
                indigo 0,
                indigo 85.8%,
                purple 0, 
                purple 100%);        
        }

顏色要設置兩次，是由於每一個顏色須要一個起始着色點，而後還須要將兩個顏色之間的漸變過渡區域覆蓋爲實色，消除過分效果。

---

水平條紋

漸變是一種由代碼生成的圖像，咱們能想對待其餘任何背景圖像那般來對待他，好比對其使用 background-size 來調整其大小。

div{
            width:200px;
            height: 200px;            
            background:linear-gradient(                
                #fb3 50%,
                #58a 0
                );
            background-clip:padding-box;
            background-size: 20px 100%;
}

---

　垂直條紋

div{
    width:200px;
    height: 200px;            
    background:linear-gradient(
            to right,/*or 90deg*/
            #fb3 50%,
            #58a 0
    );
    background-clip:padding-box;
    background-size: 100% 20px;
}

---

0x05 斜向條紋

div{
    width:200px;
    height: 200px;            
    background:linear-gradient(
        45deg,
        #fb3 0,
        #fb2 25%,
        #58a 0,
        #58a 50%,
        #fb3 0,
        #fb3 75%,
        #58a 0,
        #58a 100%
        );
    background-clip:padding-box;
    background-size: 20px 20px;
}

若是咱們須要爲背景添加斜向條紋，那麼便須要爲貼片( 20px,20px)設置完整的色標。不幸的是，這種方法並不完美，當咱們嘗試改變漸變的角度時，看起來會很糟糕。幸運的是，還有更好的方法來建立斜向條紋，即 repeating-linear-gradient 和 repeating-radial-gradient，循環式的重複漸變。

如此，便再也無須擔憂如何去建立無縫拼接的貼片。而且，咱們會直接在漸變的色標中指定長度，而不是原來的 bakcground-size ，這裏的長度是直接在漸變軸上進行度量的，它直接表明了條紋自身的寬度，對漸變來講就是以整個元素的範圍進行填充。

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

需注意的是在這個方法中，若是咱們想要建立雙色條紋，那麼便須要使用四個色標才行。

---

0x06 同色繫條紋

div{
    width:200px;
    height: 200px;            
    background: deeppink;
    background-image: repeating-linear-gradient(
        30deg,
        hsla(0,0%,100%,0.3),
        hsla(0,0%,100%,0.3) 15px,
        transparent 0,
        transparent 30px
    );
        }

咱們首先爲其指定了一個主色系的背景顏色，而後把半透明白色的條紋疊加在主色系背景之上獲得淺色條紋。

桌布圖(方格圖)

div{
    width:200px;
    height: 200px;            
    background: white;
    background-image: 
       linear-gradient( rgba(200,0,0,0.5) 50%,transparent 0),
       linear-gradient(90deg,rgba(200,0,0,0.5) 50%,transparent 0);
    background-size: 30px 30px;
}

---

0x07 僞隨機條紋

天然界中的事物都不是以無限平鋪的方式存在的。大天然更不會以 "無縫" 的貼片重複本身。因此重現大天然的隨機性也許展示更多的真實性。

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%,81px 100%;
//41,61,81 都是質素

爲了增長隨機性的真實性，咱們將貼片尺寸進行了最大化。爲了讓最小公倍數最大化，即要達成相對質素，那麼最好的方法即是使用質數。