背景&邊框之魔法武器CSS3

SwordFly 發(fā)布于2019-08-29 15:34 / 1076人閱讀

摘要：簡述在頁面的構(gòu)建過程中，離不開背景邊框，背景和邊框就是最基本的設(shè)置了為了實現(xiàn)一些特定的視覺效果，單一的純色背景已經(jīng)不能滿足現(xiàn)有的效果了。在這里，我們使用純來實現(xiàn)一些相對復(fù)雜的背景和邊框效果，這些效果不能很好的實現(xiàn)向下兼容。

簡述

在頁面的構(gòu)建過程中，離不開背景、邊框，背景和邊框就是最基本的設(shè)置了
UI為了實現(xiàn)一些特定的視覺效果，單一的純色背景已經(jīng)不能滿足現(xiàn)有的效果了。越來越多的圖片背景開始盛行。這個在一定程度上也特別方便，當(dāng)然，也會經(jīng)常碰到一些不能使用重復(fù)實現(xiàn)的背景效果，此時就需要切出來一張大幅的背景圖片，圖片越大就會拖慢頁面的速度，用戶體驗的效果就會差強(qiáng)人意。
當(dāng)下css3已經(jīng)普及，雖然并不能很好的向下兼容，卻可以做好回退。
在這里，我們使用純css來實現(xiàn)一些相對復(fù)雜的背景和邊框效果，這些效果不能很好的實現(xiàn)向下兼容。

背景

1.條紋背景
條紋背景，我們可以通過background的屬性 linear-gradinet 來實現(xiàn)。通過實操來查看效果

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

背景效果：

可以看到，呈現(xiàn)的效果就是兩種顏色的漸變，通過改變色標(biāo)的位置，可以拉近兩個色標(biāo)，那把兩個色標(biāo)重合在一起，就會產(chǎn)生條紋的效果，如圖

這樣就是沒有平滑漸變的條紋效果了，在應(yīng)用中，我們可以使用background-size來調(diào)整條紋的尺寸，

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

這樣就有了如圖的效果

改變色標(biāo)的位置，就可以實現(xiàn)不等寬的條紋效果
那如果想要超過兩種顏色的條紋效果，也是很容易實現(xiàn)的

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

以上都是水平的條紋，那垂直的條紋甚至斜向的條紋能實現(xiàn)嗎，當(dāng)然可以的，我們只需要修改漸變的方向就可以實現(xiàn)了
垂直條紋

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;

然后，我們看到的效果是

很明顯的，這個效果并不是我們想要的斜紋。原因就是我們只是把每個背景塊的漸變旋轉(zhuǎn)了45deg，并不是把整個重復(fù)的背景都旋轉(zhuǎn)了。那如果我們想實現(xiàn)條紋效果，我們就要找到一個可重復(fù)的背景貼片，來實現(xiàn)無縫的拼接，實現(xiàn)如下的效果

在上圖中，黑色區(qū)域就是一個可重復(fù)的背景貼片，這樣就達(dá)到了預(yù)期的效果。實現(xiàn)的代碼為：

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

我們添加了更多的色標(biāo)，也加大了貼片的區(qū)域范圍，當(dāng)然這個我們是通過勾股定理計算得到的這個近似值，但是如果每次因為改變角度，或者條紋寬度我們都要去計算一下值，這個是事倍功半的方法，反倒增加了我們的工作量。
更好的實現(xiàn)斜向條紋，linear-gradient有一個循環(huán)式的加強(qiáng)版： repeating-linear-gradient(),它的工作原理是色標(biāo)可以無限循環(huán)重復(fù)的，直到填滿了整個背景

對應(yīng)的代碼：

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

就是這樣，我們可以通過很簡單的一段代碼，不需要復(fù)雜的計算，就實現(xiàn)想要的效果！

接下來，我們來延伸一下，來實現(xiàn)更復(fù)雜一點的背景效果，比如，網(wǎng)格等常見的圖案

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請求，多數(shù)情況下都還是可以實現(xiàn)的，如果要設(shè)計到兼容問題，那可能有些不現(xiàn)實了，那背景圖片還是最好的解決辦法，
我是在學(xué)習(xí)css揭秘這本書的時候?qū)懙墓P記，
最后展示一個夜空的背景效果
如圖

代碼貼上

.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;
    }

還有更多的內(nèi)容等著我去開發(fā)....加油加油！！！