背景&邊框之魔法武器CSS3

SwordFly 發布于2019-08-29 15:34 / 1078人閱讀

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

簡述

在頁面的構建過程中，離不開背景、邊框，背景和邊框就是最基本的設置了
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;
    }

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

云服務器 GPU云服務器服務武器秘密武器武器庫七種武器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113409.html

CSS魔法堂：重拾Border之——不僅僅是圓角

摘要：擼代碼實現首頁檢驗單查詢成品通用標準審核圓角的何止是啊上圖的變成橢圓形了，而且中的文字好像飄到外面。我們可以看到兩邊相交所形成的矩形的對角線，將作為邊的相交點。前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/right...

_Dreams 2019-08-30 13:01 評論0 收藏0
CSS開發

摘要：譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關于是一款進行柵格布局的輔助工具，它讓開發者擺脫了冗雜的數學計算，同時降低了樣式與結構的耦合程度。【譯】CSS 十六進制顏色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃本文永久鏈接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 評論0 收藏0
CSS魔法堂：重拾Border之——圖片作邊框

摘要：一鋪搞定一鋪清袋粵語的一鋪搞定其實就是一次完成全部工作的意思，上面關于的屬性，要是每次都逐個設置那要敲多少次鍵盤啊。。。語法粵語的一鋪清袋其實就是把之前的成果一次性歸零。前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/...

linkFly 2019-08-30 12:59 評論0 收藏0
CSS魔法堂：重拾Border之——更廣闊的遐想

摘要：也就是說我們操作的幾何公式中的未知變量，而具體的畫圖操作則由渲染引擎處理，而不是我們苦苦哀求設計師幫忙。前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/right-radius的水平半徑之和大于元素寬度時，實際值會按比...

lily_wang 2019-08-30 13:01 評論0 收藏0
CSS3 聊天氣泡框以及 inherit、currentColor 關鍵字

摘要：效果如上圖所示，主要用到的偽類，以及圓角邊框屬性。的屬性的使用然后通過定位到合適的位置。實現氣泡框結果也很簡單，就一個。的關鍵字與之類似的還有一個新的顏色屬性。實際上，這是中有史以來第一個變量，雖然功能很有限，但它真的是個變量。 showImg(https://segmentfault.com/img/remote/1460000010869212);效果如上圖所示，主要用到CSS3的...

kel 2019-08-29 11:02 評論0 收藏0