背景&邊框之魔法武器CSS3

簡述

在頁面的構建過程當中，離不開背景、邊框，背景和邊框就是最基本的設置了
UI爲了實現一些特定的視覺效果，單一的純色背景已經不能知足現有的效果了。愈來愈多的圖片背景開始盛行。這個在必定程度上也特別方便，固然，也會常常碰到一些不能使用重複實現的背景效果，此時就須要切出來一張大幅的背景圖片，圖片越大就會拖慢頁面的速度，用戶體驗的效果就會差強人意。
當下css3已經普及，雖然並不能很好的向下兼容，卻能夠作好回退。
在這裏，咱們使用純css來實現一些相對複雜的背景和邊框效果，這些效果不能很好的實現向下兼容。

---

背景

1.條紋背景
條紋背景，咱們能夠經過background的屬性 linear-gradinet 來實現。經過實操來查看效果

background: linear-gradient(#fba, #58a);

背景效果：

能夠看到，呈現的效果就是兩種顏色的漸變，經過改變色標的位置，能夠拉近兩個色標，那把兩個色標重合在一塊兒，就會產生條紋的效果，如圖

這樣就是沒有平滑漸變的條紋效果了，在應用中，咱們可使用background-size來調整條紋的尺寸，

background: linear-gradient(#fba, #58a);
background-size: 100% 20px;

這樣就有了如圖的效果

改變色標的位置，就能夠實現不等寬的條紋效果
那若是想要超過兩種顏色的條紋效果，也是很容易實現的

background: linear-gradient(#fba 33.3%,#58a 0, #58a 66.6%, #9acd32 0);
background-size: 100% 30px;

以上都是水平的條紋，那垂直的條紋甚至斜向的條紋能實現嗎，固然能夠的，咱們只須要修改漸變的方向就能夠實現了
垂直條紋

background: linear-gradient(to right, #fba 33.3%,#58a 0, #58a 66.6%, #9acd32 0);
background-size: 100% 30px;

斜向條紋
看都斜向，你們的第一想法確定是去改變漸變的方向。如：

background: linear-gradient(45deg, #fba 50%, #58a 0);
background-size: 30px 30px;

而後，咱們看到的效果是

很明顯的，這個效果並非咱們想要的斜紋。緣由就是咱們只是把每一個背景塊的漸變旋轉了45deg，並非把整個重複的背景都旋轉了。那若是咱們想實現條紋效果，咱們就要找到一個可重複的背景貼片，來實現無縫的拼接，實現以下的效果

在上圖中，黑色區域就是一個可重複的背景貼片，這樣就達到了預期的效果。實現的代碼爲：

background: linear-gradient(45deg, #fba 25%, #58a 0, #58a 50%, #fba 0, #fba 75%, #58a 0);
background-size: 42px 42px;

咱們添加了更多的色標，也加大了貼片的區域範圍，固然這個咱們是經過勾股定理計算獲得的這個近似值，可是若是每次由於改變角度，或者條紋寬度咱們都要去計算一下值，這個是事倍功半的方法，反倒增長了咱們的工做量。
更好的實現斜向條紋，linear-gradient有一個循環式的增強版： repeating-linear-gradient(),它的工做原理是色標能夠無限循環重複的，直到填滿了整個背景

對應的代碼：

background: repeating-linear-gradient(60deg, #fba, #fba 15px, #58a 0, #58a 30px);

就是這樣，咱們能夠經過很簡單的一段代碼，不須要複雜的計算，就實現想要的效果！

接下來，咱們來延伸一下，來實現更復雜一點的背景效果，好比，網格等常見的圖案

background: #fba;
background-image: linear-gradient(white 2px, transparent 0),
                  linear-gradient(90deg, white 2px, transparent 0),
                  linear-gradient(rgba(255,255,255,.3) 1px, transparent 0),
                  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;

使用css來完成背景，減小了好http請求，多數狀況下都仍是能夠實現的，若是要設計到兼容問題，那可能有些不現實了，那背景圖片仍是最好的解決辦法，
我是在學習css揭祕這本書的時候寫的筆記，
最後展現一個夜空的背景效果
如圖

代碼貼上

.star-bg{width: 600px; height: 600px; margin: 20px;
        background-color: #000;
        background-image: radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 40px),
                          radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 30px),
                          radial-gradient(white, rgba(255, 255 ,255, .1) 2px, transparent 40px),
                          radial-gradient(rgba(255, 255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
        background-size: 600px 600px, 350px 350px, 250px 250px, 150px 150px;
        background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
    }

還有更多的內容等着我去開發....加油加油！！！