前言
這段時間,一直覺得css這塊感覺每次寫程式碼都是常用的那些基本屬性,覺得始終沒有對css有一個更深層次的掌握,所以,最近開始學習css相關進階知識,首先第一關就是攻克 “css揭祕” 這本經典書籍,所以在閱讀過程中,有一些總結想分享給大家,希望大家一起進步。
本節要將的內容
- 半透明邊框
- 多重邊框
- 靈活的背景定位
- 邊框內圓角
- 條紋背景
- 複雜的背景圖案
- 總結
一:半透明邊框
預設情況下,css背景會覆蓋到邊框區域,如下:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/21e8cb0fbe7955eebbda28be44c17f28bd1ef34e5fb3a662fe44ccafd455ff3f.png)
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;
複製程式碼
二:多重邊框
首先,我們看一下以下效果:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/c696cdc85ac2699b57c10e2378c5eb3ac6b92853b51afc92f6ba8f7661be2833.png)
- 我們最先想到的就是使用邊框
width: 200px;
height: 200px;
background: green;
border: 10px solid deeppink;
複製程式碼
- 如果我們想實現兩層邊框呢?採用border + outline描邊。
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/6c03151ff3bbe70f099791332d97dccb4a9f6a977e153d7711be682cafd6aada.png)
width: 200px;
height: 200px;
background: green;
border: 10px solid deeppink;
outline: 10px solid pink;
複製程式碼
- 如果我們想實現多層邊框呢?outline + border只能實現兩層邊框,兩層以上的邊框只能通過box-shadow實現。
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/6dbe8afefbded7c3b205af2857771b51fbd4c40f7ea661baba0528ce1fa1dc04.png)
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
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/9513db86ec8569b521b86662c7e6656bd8bfa4d44f5477ac35de867fe87b4c60.png)
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發現:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/f3d93ab8a9953dfcfbcb9e942ff126a0e92b1d9797291c0ac8964a210c7d5cff.png)
background-origin: padding-box(預設)/border-box/content-box
複製程式碼
四:邊框內圓角
首先,我們看一下如下效果:邊框外部直角,邊框內部圓角
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/76c0293151c03ad1518cbad0558db638376e068b3c3aaa99280b966adb08c2ff.png)
我們最常見的實現方法就是,採用兩個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的效果)
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/22533665cc27e6a1f6a673c4b9eb3b903e552de780fbf413e848c2dce22e84ed.png)
五:條紋背景
1.首先看一下第一個效果:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/2e4c51746d5be48250147bed525ba2116f6a72d4ea1c87fdb0bf0baf23593772.png)
width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(green, red);
//等價於:linear-gradient(green 0, red 100%)//0表示從開始漸變的起始位置,100%表示漸變的結束位置。
複製程式碼
2.我們在看看第二個效果
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/ce87d96c3fcb5092d0e53eea89834f418726c6e37111eecbf4d1527aae8fc87b.png)
width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(green 20%, red 80%);//表示從上到下,20%處開始漸變,80%處停止漸變
複製程式碼
3.如何採用linear-gradient實現條紋效果呢?即去除漸變的效果,效果如下:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/f35b0a42b5c88cc9e44066074d94a7384a5540cbcda841b89d43531a73a07da0.png)
width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(green 50%, red 50%); // 此處,第二引數只要小於等於50%都可以。
複製程式碼
4.如何實現垂直條紋呢?
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/881135c74a63ab49959fee68851b218a53fc11d18b148f04537cb795f7ab6055.png)
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也可以像控制圖片的背景大小一樣,控制漸變的背景大小。 如下效果:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/b8266dcf5d76baae7b6801d9899bd6f286d07179422d095845f7524039173a4c.png)
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/7013df4a151886f1899cb9d1c5ea90ca91c0650f4d177cf3cae8affe5f0c195f.png)
width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(to right, green 50%, red 50%) no-repeat;//設定背景是否重複。
background-size: 30px 100%;//設定背景大小
複製程式碼
6.如何傾斜條紋呢? 實現效果如下:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/44a6e99e97f0025ec5b97b8c4dc118c4276d72b5b5acf376851092e8f8099af3.png)
此刻,我們可能想到的是,旋轉一下不就可以了嗎?
width: 200px;
height: 200px;
border: 1px solid #aaa;
background: linear-gradient(45deg, green 50%, red 50%);
background-size: 30px 30px;
複製程式碼
效果如下:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/a9cf0ed858e61283c4492f091c4daad674452485b490554cec00d83fd713f4f4.png)
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/a597cf128b427dc2a8a5e87d0d2e62fbf03d09c504099f64683bdbe349012963.png)
但是看到效果,哈哈哈,明顯不是我們想要的效果, 怎麼辦呢?當然是有其他屬性支援嘍,即repeating-linear-gradient, 顧名思義,就是可以不斷重複。 實現程式碼如下:
width: 200px;
height: 200px;
border: 1px solid #aaa;
background: repeating-linear-gradient(45deg, green 0, red 30px);
複製程式碼
實現的效果如下:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/344609557cdc2b3db26da013f2117a5996c59c31303217bcb0c97543f7e352be.png)
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即可實現我們想要的各種條紋效果。
六:複雜的背景圖案
出了上面我們第五節所講到的條紋背景,還有網格,波點,棋盤等更復雜的背景,下面我們就看看這些效果如何實現吧!
- 網格背景:水平條紋和垂直條紋背景疊加在一起既可以實現網格效果。 程式碼如下:
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;
複製程式碼
上面程式碼實現的效果如下:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/92d1c616be88590216dfe6dbc549ae5743537f00c63d21ba6740b0d55f661eda.png)
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/b2f721c105b554c18bfa365cad79136efc303157ba669d0bf77183a0e71189fb.png)
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;
複製程式碼
實現效果如下:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/f256153430e49d567b95df20ae3006d7d7fd27566b11880c9a852e579e1fa3ce.png)
- 波點背景
之前我們實現的條紋,網格背景都是採用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類似,如果結束位置大於起始位置,則去掉漸變效果)
坦白說,上面的波點圖並不是真正的波點圖,我們來看看真正波點圖的效果:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/6a92a669fd7caa7e3e53a5391885abff31de42f6ddacdbb6ea92b2dfadcbffcd.png)
其實就是,又錯位增加了一層圓形的顯示,那我們只需要將兩種上面實現的效果,並且不同的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);
複製程式碼
七:連續的圖案邊框
首先,我們看一下如下效果:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/a229e8f5be04191c2ac87665a2c826eb6d2a5695a487ee6fc1097614d09db877.png)
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;
複製程式碼
實現的效果如下:
![css揭祕 - 背景與邊框 [一]](https://i.iter01.com/images/63c9cb570ba5f07e117ba0f7ba6816255313f3983adaec93bbf8f7017fb76c1e.png)
七:總結
之前,在用到content-box,padding-box,border-box等屬性值的時候,可能更多的是用於box-sizing屬性,用於改變盒模型,通過這一節的學習,我們也知道了,這三個屬性值同樣適用於backgroud-clip,backgroud-origin等屬性,
- background-clip: 用於控制背景鋪滿的區域,預設是border-box, 也可以為padding-box和border-box
- backgroud-position: 設定背景的偏移量,預設是相對於padding-box的偏移量,這是由於backgroud-origin的預設值是padding-box
- backgrund-origin: 控制backgroud-position的偏移量是相對於哪個區域的偏移量。
- box-shadow:設定陰影效果,記住各個引數的含義。
- linear-gradient/repeating-linear-gradient:線性漸變,可以實現條紋,網格等效果。
- radial-gradient/repeating-radial-gradient: 徑向漸變,可以實現波點。
以上是我們這節內容所涉及到的屬性,同時我們要結合所將的案例,才可以有一個深入的瞭解,一起加油!!!