摘要：背景與邊框半透明邊框背景知識顏色在里我們可以使用和兩種色彩模式，二者均可以用來在設(shè)置顏色的同時指定其它透明度。解決方案需要知道的是，在默認(rèn)情況下，背景會延伸到邊框所在區(qū)域的下層。

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

在CSS3里我們可以使用RGBA和HSLA兩種色彩模式，二者均可以用來在設(shè)置顏色的同時指定其它透明度。RGBA指的是“紅色、綠色、藍(lán)色和Alpha透明度”，而HSLA則代表“色調(diào)、飽和度、亮度和Alpha透明度”。

在RGBA模式里，前三個參數(shù)分別是紅色、綠色和藍(lán)色的強度值，取值從 0~255 或 0%~100% （最常見的是 0~255， 而非百分?jǐn)?shù)形式）。而在HSLA模式里，前三個參數(shù)則分別代表色調(diào)（ 0~360 ）、飽和度（ 0%-100% ）和亮度（ 0%~100% ）。RGBA和HSLA第四個參數(shù)都是透明度，取值從0（完全透明）到1（完全不透明）。

CSS3仍有opacity屬性，但它的作用是使整個元素都半透明，包括前景內(nèi)容，而不僅是背景。

需要知道的是，在默認(rèn)情況下，背景會延伸到邊框所在區(qū)域的下層。所以即使我們給邊框設(shè)置了半透明的效果，那么從視覺上也是無法分辨的。所以,如果我們不希望背景侵入邊框所在的范圍，就需要使用到 CSS3 的 background-clip 背景切割屬性，將它的值設(shè)置為 padding-box。

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

不為人知的是，box-shadow 還可以接受第四個參數(shù)(稱為"擴展半徑")，通過指定正值或者負(fù)值，可以讓投影面積加大或者減小。

一個正值的擴展半徑加上兩個為零的偏移量以及為零的模糊值，得到的投影其實就像是一道實線邊框了，在加上 box-shadow 的最大好處，可以支持逗號分隔發(fā)法，那么我們便可以為其創(chuàng)建任意數(shù)量的投影了。

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

有時當(dāng)我們只需要兩層邊框的時候，便可以使用 outline 屬性來產(chǎn)生外層的邊框，這種方案會變得非常靈活，而不同于 box-shadow 只能模擬實現(xiàn)邊框。

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

描邊的另一屬性 outline-offset 還可以控制它更元素邊緣之間的間距，這個屬性可以接受負(fù)值。

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

但是，IE8 以下的并不支持 outline-offset 屬性。

去掉 input 標(biāo)簽 focus 時的亮色邊框 input {outline:none}

有時，我們希望背景圖片與容器的邊角之間留出一定的空隙(類似內(nèi)邊距的效果)，在 CSS2 的時代要實現(xiàn)這一點是很麻煩的。但是在 CSS3 的時代 background-position 屬性已經(jīng)得到了很好的擴展，并且當(dāng)結(jié)合 background-origin 屬性使用時，將發(fā)揮出更大的創(chuàng)造力。

在 CSS3 中，background-position 允許我們指定背景圖片距離任意角的偏移量，只需我們在偏移量前指定關(guān)鍵字就好了。

需要知道的是，background-position 在默認(rèn)情況下是以 padding-box 為基準(zhǔn)的，不過，我們可以使用 CSS3 中一個新的屬性 background-origin 來改變這種默認(rèn)行為。background-origin 默認(rèn)值同樣為 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 中使用的邊角關(guān)鍵字將會以內(nèi)容區(qū)的邊緣作為基準(zhǔn)。

一個靈活的方法是使用兩個嵌套的 div 來實現(xiàn)邊框內(nèi)圓角的效果。

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

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

在 CSS 漸變屬性中使用百分比的作用是指某個顏色距離起點的起始位置。默認(rèn)的漸變樣式為從上往下，所以當(dāng)某個顏色值設(shè)置了百分比后，便會從距離頂端相關(guān)的距離（百分比計算）開始填充實色。而漸變是也有空間占比的，漸變過渡區(qū)的占比為總的空間(高度或?qū)挾?減去上下兩個著色塊空間占比剩下的空間。

紅色30% 橙色70%的漸變過渡占比為

但若是前面有比當(dāng)前的顏色值百分比大的，會自動將當(dāng)前顏色值的百分比設(shè)置為前面顏色中的最大百分比值。

此外，默認(rèn)情況下，還會根據(jù)顏色的個數(shù)來為每個顏色設(shè)置百分比，最后一個顏色的百分比值就是100%，而起始的值就是0%，中間如果再有多個顏色值，則根據(jù)100/（個數(shù)-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%);        
        }

顏色要設(shè)置兩次，是因為每個顏色需要一個起始著色點，然后還需要將兩個顏色之間的漸變過渡區(qū)域覆蓋為實色，消除過度效果。

漸變是一種由代碼生成的圖像，我們能想對待其他任何背景圖像那般來對待他，比如對其使用 background-size 來調(diào)整其大小。

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

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)設(shè)置完整的色標(biāo)。不幸的是，這種方法并不完美，當(dāng)我們嘗試改變漸變的角度時，看起來會很糟糕。幸運的是，還有更好的方法來創(chuàng)建斜向條紋，即 repeating-linear-gradient 和 repeating-radial-gradient，循環(huán)式的重復(fù)漸變。

如此，便再也無須擔(dān)心如何去創(chuàng)建無縫拼接的貼片。并且，我們會直接在漸變的色標(biāo)中指定長度，而不是原來的 bakcground-size ，這里的長度是直接在漸變軸上進行度量的，它直接代表了條紋自身的寬度，對漸變來說就是以整個元素的范圍進行填充。

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

需注意的是在這個方法中，如果我們想要創(chuàng)建雙色條紋，那么便需要使用四個色標(biāo)才行。

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

自然界中的事物都不是以無限平鋪的方式存在的。大自然更不會以 "無縫" 的貼片重復(fù)自己。所以重現(xiàn)大自然的隨機性也許展現(xiàn)更多的真實性。

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 都是質(zhì)素

為了增加隨機性的真實性，我們將貼片尺寸進行了最大化。為了讓最小公倍數(shù)最大化，即要達(dá)成相對質(zhì)素，那么最好的方法便是使用質(zhì)數(shù)。