css揭祕實戰技巧- 背景與邊框 [一]

時間 2019-11-09

標籤 css 揭祕實戰技巧背景邊框欄目 CSS 简体版

原文原文鏈接

前言

這段時間，一直以爲css這塊感受每次寫代碼都是經常使用的那些基本屬性，以爲始終沒有對css有一個更深層次的掌握，因此，最近開始學習css相關進階知識，首先第一關就是攻克「css揭祕」這本經典書籍，因此在閱讀過程當中，有一些總結想分享給你們，但願你們一塊兒進步。css

全目錄

本系列文章，主要是圍繞css3屬性，實現咱們常見的各類效果，這些效果都是咱們實戰開發中常常能夠用到的效果：css3

本節要說的內容：瀏覽器

半透明邊框

多重邊框

靈活的背景定位

邊框內圓角

條紋背景

複雜的背景圖案

總結

一：半透明邊框

默認狀況下，css背景會覆蓋到邊框區域，以下： bash

代碼以下：

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

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

backgroud-clip: border-box(默認) / padding-box / content-box; 複製代碼

二：多重邊框

首先，咱們看一下如下效果：佈局

如何實現如下效果呢？

咱們最早想到的就是使用邊框

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

若是咱們想實現兩層邊框呢？採用border + outline描邊。

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

若是咱們想實現多層邊框呢？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 post

咱們最早想到的就是採用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便可實現咱們想要的各類條紋效果。

六：複雜的背景圖案

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

網格背景：水平條紋和垂直條紋背景疊加在一塊兒既能夠實現網格效果。代碼以下：

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;
複製代碼

實現效果以下：

波點背景以前咱們實現的條紋，網格背景都是採用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等屬性，

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: 徑向漸變，能夠實現波點。

以上是咱們這節內容所涉及到的屬性，同時咱們要結合所將的案例，才能夠有一個深刻的瞭解，一塊兒加油！！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。