css揭祕 - 背景與邊框 [一]

前言

這段時間，一直覺得css這塊感覺每次寫程式碼都是常用的那些基本屬性，覺得始終沒有對css有一個更深層次的掌握，所以，最近開始學習css相關進階知識，首先第一關就是攻克 “css揭祕” 這本經典書籍，所以在閱讀過程中，有一些總結想分享給大家，希望大家一起進步。

本節要將的內容

1. 半透明邊框
2. 多重邊框
3. 靈活的背景定位
4. 邊框內圓角
5. 條紋背景
6. 複雜的背景圖案
7. 總結

一：半透明邊框

預設情況下，css背景會覆蓋到邊框區域，如下：

程式碼如下：

width: 200px;
height: 200px;
background-color: green;
padding: 10px;
border: 10px solid rgba(0, 0, 0, .2); 
複製程式碼

如果想要背景只覆蓋到padding區域或者content區域，如何處理？backgroud-clip;

backgroud-clip: border-box(預設) / padding-box / content-box;
複製程式碼

二：多重邊框

首先，我們看一下以下效果：

如何實現以下效果呢？

1. 我們最先想到的就是使用邊框

width: 200px;
height: 200px;
background: green;
border: 10px solid deeppink;
複製程式碼

2. 如果我們想實現兩層邊框呢？採用border + outline描邊。

width: 200px;
height: 200px;
background: green;
border: 10px solid deeppink;
outline: 10px solid pink;
複製程式碼

3. 如果我們想實現多層邊框呢？outline + border只能實現兩層邊框，兩層以上的邊框只能通過box-shadow實現。

width: 200px;
height: 200px;
background: green;
box-shadow: 0 0 0 10px blue, 0 0 0 20px deeppink, 0 0 0 30px pink;
//說明：box-shadow縮寫：
//第一個參數列示水平方向向右的偏移量，第二個參數列示垂直方向向下的偏移量
//第三個參數列示陰影的模糊程度，第四個參數列示陰影半徑大小。
//第五個引數：outsert/ inset 外陰影或者內陰影，預設為前者。
複製程式碼

總結：一般實現多重邊框的效果時，可以考慮outline和box-shadow去實現類似的效果，但是各個方式有不同的優缺點： 1. outline: 優點是可以使用和border一樣的屬性值，可以設定為dashed等效果，這些是box-shadow無法實現的，缺點就是隻能實現兩層邊框，同時邊框不一定會貼合border-radius的值，即邊框如果設定了圓角，描邊可能還是直角的。 2. box-shadow：優點是可以實現多層邊框，但是使用box-shadow實現只是類似邊框的效果，並不是真正的邊框，也不會佔據佈局空間,也不會影響滑鼠事件（即滑鼠放在陰影和元件上都會觸發相同的事件）

三：靈活的背景定位

實現如下效果：想要背景圖片距離底部20px，距離右邊20px

我們最先想到的就是採用background-position實現，程式碼如下：

width: 200px;
height: 200px;
background: url("./img/logo_blue.jpg") no-repeat green;
background-position: right 20px bottom 20px; 
//或者採用calc處理
//background-posotion: calc(100% - 20px) calc(100% - 20px)
background-size: 50px 50px;
複製程式碼

以上程式碼，我們檢視瀏覽器element發現：

此時，backgroud-position所對應的偏移量是相對於padding-box所在的區域，那麼，如果要相對於border-box或者content-box呢？我們可以採用posotion-origin實現

background-origin: padding-box(預設)/border-box/content-box
複製程式碼

四：邊框內圓角

首先，我們看一下如下效果：邊框外部直角，邊框內部圓角

我們最常見的實現方法就是，採用兩個div，一個設定直角，一個設定圓角，然後疊加在一起即可，這種方法絕對沒問題，但是他使用了兩個標籤，那麼使用一個標籤可以實現嗎？當然可以，

width: 400px;
height: 200px;
background: green;
outline: .5em solid red;
border-radius: .8em;
box-shadow: 0 0 0 .5em red;
複製程式碼

實現說明：我們採用outline去進行外部描邊，且為直角，內部採用border-radius設定圓角，且採用box-shadow去填充因為圓角而空出來的部分，從而實現邊框內圓角的效果。（以下是沒有設定box-shadow的效果）

五：條紋背景

1.首先看一下第一個效果：

看到效果，我們就知道，這不就是漸變嘛，採用linear-gradient即可，程式碼如下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(green, red);
//等價於：linear-gradient(green 0, red 100%)//0表示從開始漸變的起始位置，100%表示漸變的結束位置。
複製程式碼

2.我們在看看第二個效果

實現程式碼如下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(green 20%, red 80%);//表示從上到下，20%處開始漸變，80%處停止漸變
複製程式碼

3.如何採用linear-gradient實現條紋效果呢？即去除漸變的效果,效果如下：

關鍵點：就是從漸變的起始位置和結束位置下手，如果在開始漸變前，就結束了漸變，不就沒有漸變效果了嘛，所以只需要設定結束漸變的位置小於開始漸變的位置即可,程式碼如下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(green 50%, red 50%); // 此處，第二引數只要小於等於50%都可以。
複製程式碼

4.如何實現垂直條紋呢？

程式碼如下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(90deg, green 50%, red 50%);// 即旋轉90度 
//或者
background: linear-gradient(to right, green 50%, red 50%);//預設是to bottom，即等價於0deg。to right等價於90deg
複製程式碼

5.如何設定漸變背景的大小？即background-size也可以像控制圖片的背景大小一樣，控制漸變的背景大小。 如下效果：

程式碼如下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(to right, green 50%, red 50%) no-repeat;//設定背景是否重複。
background-size: 30px 100%;//設定背景大小
複製程式碼

6.如何傾斜條紋呢？ 實現效果如下：

此刻，我們可能想到的是，旋轉一下不就可以了嗎？

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(45deg, green 50%, red 50%);
background-size: 30px 30px;
複製程式碼

效果如下：

這個時候，我們發現，我們在linear-gradient(45deg, green 50%, red 50%)設定的旋轉，其實是旋轉每一個背景塊，並不是讓整個div旋轉，那麼，這個時候，我們通過transform:rotate(45deg)來旋轉div看一下效果：

但是看到效果，哈哈哈，明顯不是我們想要的效果, 怎麼辦呢？當然是有其他屬性支援嘍，即repeating-linear-gradient， 顧名思義，就是可以不斷重複。 實現程式碼如下：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: repeating-linear-gradient(45deg, green 0, red 30px);
複製程式碼

實現的效果如下：

emmm,怎麼出現漸變了呢？ 當然會出現了，你看看上面的實現程式碼，結束位置大於其實位置，那麼，如何去除漸變呢？ 這裡有一個小技巧，例如linear-gradient(green 0, green 30),這個時候雖然，結束位置大於起始位置，但是設定的同一種顏色，所以看不到漸變，看到的實際上還是純色。 所以，我們可以利用這個小技巧去實現程式碼：

width: 200px;
height: 200px;
border: 1px solid #aaa;
background: repeating-linear-gradient(45deg, green 0, green 30px, red 30px, red 60px, green 30px);
複製程式碼

啦啦啦，我們最開始想要的效果就可以得到啦。

至此：條紋效果，不管是水平，垂直，還是傾斜，我們就可以都可以實現的，大致思路就是採用linear-gradient屬性，然後通過設定起始位置和結束位置去掉漸變的效果，同時設定旋轉的角度，配合repeating-linear-gradient即可實現我們想要的各種條紋效果。

六：複雜的背景圖案

出了上面我們第五節所講到的條紋背景，還有網格，波點，棋盤等更復雜的背景，下面我們就看看這些效果如何實現吧！

1. 網格背景：水平條紋和垂直條紋背景疊加在一起既可以實現網格效果。 程式碼如下：

width: 200px;
height: 200px;
background: white;
background-image: linear-gradient(green 50%, transparent 0), linear-gradient(90deg, red 50%, transparent 0);
background-size: 40px 40px 40px 40px;
複製程式碼

上面程式碼實現的效果如下：

這是，如果我們把漸變的起始位置調整為1px，就可以得到我們想要的網格效果，那麼最終效果如下：

同時，我們可以把不同的網格疊加在一起，程式碼如下：

width: 200px;
height: 200px;
background: white;
background-image: linear-gradient(green 1px, transparent 0), linear-gradient(90deg, red 1px, transparent 0), linear-gradient(green 5px, transparent 0), linear-gradient(90deg, red 5px, transparent 0);
background-size: 20px 20px, 20px 20px, 80px 80px, 80px 80px;
複製程式碼

實現效果如下：

2. 波點背景 之前我們實現的條紋，網格背景都是採用linear-gradient線性漸變，接下來，我們來看看radial-gradient 徑向漸變, 它主要用來建立各種圓形，橢圓，首先我們看一下最簡單的圖案：圓形陣列，效果如下：

   

   程式碼如下：

width: 200px;
height: 200px;
background: #ddd;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
複製程式碼

首先說明一下：radial-gradient第一個引數設定漸變起始位置以及顏色，第二個引數設定漸變結束位置以及顏色（和linear-gradient類似，如果結束位置大於起始位置，則去掉漸變效果）

坦白說，上面的波點圖並不是真正的波點圖，我們來看看真正波點圖的效果：

其實就是，又錯位增加了一層圓形的顯示，那我們只需要將兩種上面實現的效果，並且不同的backgroud-position，然後疊加在一起即可， 程式碼如下：

width: 200px;
height: 200px;
background: #ddd;
background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
複製程式碼

注意：上面的程式碼，我們要知道背景定位的位置必須是貼片的寬高的一半，這就意味著，如果我們要修改貼片的寬高，就要同時修改多個位置，那麼遵從我們的dry原則，採用mixin解決(此處的程式碼是scss)

@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;
}
//然後，我們可以在建立波點的地方呼叫：
@include polka(30px, 30%, #655, tan);

複製程式碼

七：連續的圖案邊框

首先，我們看一下如下效果：

此時，大家看了效果，是不是覺得很簡單？用 backgroud設定背景顏色為green,用border-color設定邊框顏色為red不就可以啦， 程式碼如下：

width: 300px;
height: 200px;
backgroud-color: green;
border: 20px solid red;
複製程式碼

上面的方案是採用backgroud + border的方式，當然可以(該方案其實就是第一節案例，半透明邊框的實現原理)

那我們是否可以採用兩層backgroud的方式去實現呢？

width: 300px;
height: 200px;
border: 20px solid transparent;
backgroud: linear-gradident(green, green), red;
backgroud-clip: padding-box, border-box;
複製程式碼

基於以上程式碼，我們可以將邊框顏色改為邊框圖片，這樣也就實現了我們所說的圖案邊框的效果

程式碼如下：

width: 300px;
height: 200px;
border: 20px solid transparent;
backgroud: linear-gradident(green, green), url('./icon.png');
backgroud-clip: padding-box, border-box;
複製程式碼

實現的效果如下：

七：總結

之前，在用到content-box,padding-box，border-box等屬性值的時候，可能更多的是用於box-sizing屬性，用於改變盒模型，通過這一節的學習，我們也知道了，這三個屬性值同樣適用於backgroud-clip,backgroud-origin等屬性，

1. background-clip: 用於控制背景鋪滿的區域，預設是border-box, 也可以為padding-box和border-box
2. backgroud-position: 設定背景的偏移量，預設是相對於padding-box的偏移量，這是由於backgroud-origin的預設值是padding-box
3. backgrund-origin: 控制backgroud-position的偏移量是相對於哪個區域的偏移量。
4. box-shadow：設定陰影效果，記住各個引數的含義。
5. linear-gradient/repeating-linear-gradient：線性漸變，可以實現條紋，網格等效果。
6. radial-gradient/repeating-radial-gradient: 徑向漸變，可以實現波點。

以上是我們這節內容所涉及到的屬性，同時我們要結合所將的案例，才可以有一個深入的瞭解，一起加油！！！