你該知道的《css揭祕》--背景與邊框篇

半透明邊框

• background-clip

  background-clip: border-box|padding-box|content-box; 默認是border-box。該屬性規定背景的繪製區域，通俗點講就是，能背景能夠延伸的範圍，三個屬性值從字面上不難理解，分別是可延伸到，border,padding,content。

• RGBA/HSLA

  分別爲RGB/HSL，加上透明度A，值爲0~1。

將背景繪製範圍設爲padding-box，邊框設置爲透明色，便可實現效果。 實現方案：

.translucent-borders{
    width: 300px;
    height: 300px;
    padding:10px;
    border:10px solid hsla(0,0%,100%,.5);
    background-color: #fff;
    background-clip:padding-box;
}
複製代碼

多重邊框

上圖多邊框可以使用 box-shadow 實現，有一個缺點就是隻能設置實線。

須要注意使用box-shadow製做‘假’邊框,不會影響佈局，並且也不會受到 box-sizing 屬性的影響，因此在實際使用中，須要注意爲這些‘假’邊框留出位置，可使用margin或者padding配合inset（向內繪製）來解決。

box-shadow支持逗號分隔語法，咱們 能夠建立任意數量的投影。

實現方案：

.multiple-borders{
    width: 200px;
    height: 200px;
    padding:10px;
    box-sizing: border-box;
    /*border:10px solid red;*/
    border-radius: 10px;
    margin:50px;
    background: pink;
    box-shadow:
    0 0 0 10px red,
    0 0 0 10px blue, 
    0 0 0 20px green ,
    0 0 0 30px purple,
    0 2px 15px 40px rgba(0,0,0,.6);
}
複製代碼

如上圖，若是隻是須要兩層邊框，固然咱們還可使用outline來實現， 由於outline 並不能 接受用逗號分隔的多個值。因此只能夠實現兩層邊框。

咱們能夠outline-offset 屬性來控制它跟元素邊緣之間的間距，這個屬性甚至能夠接受負值，來實現上圖的縫邊效果。

實現方案：

.outline-borders{
    width: 200px;
    height: 200px;
    padding:25px;
    background: yellowgreen;  
    outline: 2px dashed #fff;
    outline-offset: -15px;
}
複製代碼

注意：outline有個bug，邊框不必定會貼合border-radius產生的圓角，以下圖，因此若是是有圓角，須要配合box-shadow來填補間隙。

靈活的背景定位

不少時候，咱們想針對容器某個角對背景圖片作偏移定位。 在 CSS 2.1 中，咱們只能指定距離左上角的偏移量，或者乾脆徹底靠齊到其 他三個角。可是，咱們有時但願圖片和容器的邊角之間能留出必定的空隙， (相似內邊距的效果)，如上圖(距離右邊20px，下邊20px),這時候咱們就可使用css3中提供的如下方案。

• background-position 的擴展語法方案

  在 CSS 背景與邊框(第三版)(w3.org/TR/css3-bac…)中， background-position 屬性已經獲得擴展，它容許咱們指定背景圖片距離任 意角的偏移量，只要咱們在偏移量前面指定關鍵字。

實現方案：

.background-position{
    width: 200px;
    height: 200px;
    padding: 10px;
    color:#FFF;
    background: url(http://csssecrets.io/images/code-pirate.svg)  no-repeat blue;
    background-position: right 20px bottom 20px;
}
複製代碼

• background-origin 方案

在給背景圖片設置距離某個角的偏移量時，若是是上圖這種狀況:偏移量與容器的內邊距一致。若是採用上面提到的 background-position 的擴展語法方案，代碼不夠 DRY，咱們可使用background-origin，改變背景的相對定位，讓它自動地跟着咱們設定的內邊距走，不用另外聲明偏移量的值。

注：若是背景圖像的 background-attachment 屬性爲 "fixed"，則該屬性沒有效果。

實現方案：

.background-origin{
    margin: 20px;
    width: 200px;
    height: 200px;
    padding: 10px;
    border:10px solid red;
    color:#FFF;
    background: url(http://csssecrets.io/images/code-pirate.svg) right bottom no-repeat blue; 
    background-origin: content-box;
}
複製代碼

• calc() 方案

  請不要忘記在 calc() 函數 內部的 - 和 + 運算符的兩側各加 一個空白符，不然會產生解析錯誤!

該方案就是使用calc()直接計算出距離左上角的位置，設置給background-position便可。

實現方案：

.calc{
    width: 200px;
    height: 200px;
    padding: 10px;
    color:#fff;
    background: url(http://csssecrets.io/images/code-pirate.svg) calc(100% - 10px) calc(100% - 10px) no-repeat blue;
}
複製代碼

邊框內圓角

上圖可經過上文提到的 outline沒法貼合圓角配合box-shadow實現。box-shadow的擴展半徑爲圓角半徑的一半便可。

實現方案：

.inner-rounding{
    width: 200px;
    height: 200px;
    padding:10px;
    background: hotpink;
    border-radius: 10px;
    outline:10px solid purple;
    box-shadow: 0 0 0 5px purple;
    margin: 30px;
}
複製代碼

條紋背景

實現條紋背景主要使用的就是 linear-gradient()這個漸變屬性。

根據css3規範，若是某個色標的位置值比整個列表中在它以前的色標的位置都要小，則該色標的位置值會被設置爲他前面全部色標位置值的最大值。只需修改前面的值。

給出實現方案：

/*水平條紋 */
    .horizontal-stripes{
        width: 200px;
        height: 200px;
        background: linear-gradient(red 50%, green 0);
        background-size: 100% 30px;
    }
    
    /* 垂直條紋 */
    .vertical-stripes{
        width: 200px;
        height: 200px;
        background: linear-gradient(90deg, red 50%, green 0);
        background-size: 30px 100%; 
    }
    
    /* 只能45度 */
    .diagonal-stripes{
        width: 200px;
        height: 200px;
        background: linear-gradient(45deg, red 25%, green 0,green 50%, red 0,red 75%,green 0);
        /* 記得乘以根號2 */
        background-size: 42px 42px;  
    }

    /* 任意度數 */
    .better-diagonal-stripes{
        width: 200px;
        height: 200px;
        background: repeating-linear-gradient(60deg,red, red 15px, green 0, green 30px );
        background: repeating-linear-gradient(30deg,pink 0 15px, blue 0 30px, green 0 45px);  /* 簡寫 */
    }
    
    /* 同色繫條紋 */
    .subtle-stripes{
        width: 200px;
        height: 200px;
        background-color: blue;
        background-image: repeating-linear-gradient(45deg,  hsla(0,0%,100%,.3) 0 15px, transparent 0 30px);
    }
複製代碼

複雜的背景圖案

實現方案：

.Polka{
    width: 200px;
    height: 200px;
    background: #655;
    background-image: 
    radial-gradient(pink 20%, transparent 0),
    radial-gradient(pink 20%,transparent 0);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}
複製代碼

實現方案：

.blueprint{
    width: 200px;
    height: 200px;
    background-color: skyblue;
    background-image: 
    linear-gradient(#fff 2px, transparent 0),
    linear-gradient(90deg,#fff 2px, transparent 0),
    linear-gradient(#fff 1px, transparent 0),
    linear-gradient(90deg,#fff 1px, transparent 0);
    background-size:60px 60px,60px 60px,20px 20px,20px 20px;
}
複製代碼

連續的圖像邊框

實現方案：

.continuous-image-borders{
    width: 400px;
    height: 200px;
    border:20px solid transparent;
    padding:10px;
    background: linear-gradient(#fff,#fff) padding-box, url(http://csssecrets.io/images/stone-art.jpg) border-box;
    background-size: cover;
}
複製代碼

實現方案：

.vintage-envelope{
    width: 300px;
    height: 200px;
    padding:10px;
    border:10px solid transparent;
    background: linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(-45deg,red 0 15px, transparent 0 30px,blue 0 45px, transparent 0 60px) border-box;
}
複製代碼

若是本文有幫到你，不妨給點個贊👍，我會更加有動力創做！