CSS3 linear-gradient線性漸變實現(xiàn)虛線等簡單實用圖形
這篇文章發(fā)布于 2017年10月27日，星期五乔遮，01:40沪编，歸類于?css相關。 閱讀 9949 次, 今日 84 次
by?zhangxinxu?from?http://www.zhangxinxu.com/wordpress/?p=6494
本文可全文轉載寞钥，但需得到原作者書面許可，同時保留原作者和出處盈简，摘要引流則隨意。
一太示、作為圖片存在的CSS3 gradient漸變
我覺得CSS3 Backgrounds比較厲害的一個地方就是支持多背景柠贤，也就是背景圖片個數(shù)可以無限累加，正好CSS3的gradient漸變性質是background-image类缤，于是臼勉，我們可以實現(xiàn)任意數(shù)量漸變背景圖的疊加效果。甚至餐弱，理論上宴霸，任意彩色jpg圖片都是可以使用CSS3漸變背景實現(xiàn)的。
這種特性和box-shadow類似膏蚓，參見“CSS3 box-shadow盒陰影圖形生成技術”瓢谢，text-shadow也有無限累加性，通常我們可以實現(xiàn)任意粗細和色彩的描邊效果驮瞧。
當然我們實際開發(fā)的時候氓扛，是不會使用CSS3漸變來模擬一張圖片的，更多是用來生成一些簡單實用的圖形论笔。
本文就將通過實現(xiàn)虛線采郎，三角以及加號減號等案例，展示下CSS3 linear-gradient線性漸變要圖形生成技巧狂魔。
二蒜埋、CSS3 linear-gradient線性漸變生成比例可控虛線及工具
我們平常要實現(xiàn)一個虛線效果，多半是使用border-style:dashed聲明實現(xiàn)最楷，然而虛線邊框有一個問題整份，那就是虛線的實虛比例是固定的待错，例如，Chrome和Firefox瀏覽器下皂林，顏色區(qū)的寬高比是3:1朗鸠，顏色區(qū)和透明區(qū)的寬度比例是1:1：
IE瀏覽器下顏色區(qū)的寬高比是2:1，顏色區(qū)和透明區(qū)的寬度比例也是2:1础倍，如下：
如果有設計需求烛占，希望我們的虛線顏色區(qū)的寬高比是5:1，此時沟启，border-style:dashed就鞭長莫及了忆家。
此時，借助CSS3?linear-gradient線性漸變我們可以輕松實現(xiàn)上面的效果德迹，假設HTML代碼如下：
則對應的CSS代碼如下：
.dashed {
? ? height: 1px;
? ? background: linear-gradient(to right, #000000, #000000 5px, transparent 5px, transparent);
? ? background-size: 10px 100%;
}
效果截圖如下：
當我們使用CSS3漸變來構建圖形的時候芽卿，最畫龍點睛的屬性，其實并不是漸變本身胳搞，而是background-size屬性卸例，讓我們的圖形約束在特定區(qū)域大小。
關于線性漸變生成虛線肌毅，我特意制作了一個CSS代碼生成工具筷转，您可以狠狠的點擊這里：基于CSS3線性漸變實現(xiàn)的虛線CSS生成工具demo
我們可以選擇你希望的虛線的比例，步幅以及顏色悬而，然后對應的CSS代碼就可以生成了呜舒，例如：
有興趣的話可以手動試一試。
二笨奠、CSS3 linear-gradient線性漸變生成帶線框的三角
做到三角圖形的生成袭蝗，最經典的應該是使用CSS?border屬性了，可參見“CSS border三角般婆、圓角圖形生成技術簡介”一文到腥，如果是純色三角，使用CSS3?clip-path也是一個不錯的方法蔚袍，關于clip-path文章參見這里左电。
但是有時候我們的三角是帶線框的，類似下圖這種效果：
如果不考慮兼容性页响，比較好的做法是border屬性生成兩側線框篓足，然后CSS3?transform旋轉，但也有局限闰蚕，那就是如果和三角對接的區(qū)域它不是純色而是漸變背景栈拖，則就有問題了，因為此時的三角實際上是個旋轉45度的正方形圖形塊没陡。
此時使用漸變圖形生成方法就沒有任何壓力了涩哟，因為可以得到一個真正的三角（135度斜向漸變到對角線位置）索赏，示意圖如下：
相關CSS代碼如下（這里線框也是漸變實現(xiàn)的）：
.tri {
? ? width: 6px; height: 6px;
? ? background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;
? ? background-size: 6px 1px, 1px 6px, 6px 6px;
? ? transform: rotate(-45deg);
}
眼見為實，您可以狠狠的點擊這里：基于CSS3線性漸變三角圖形生成demo
更新記錄（10-29）：transparent 6px?→?hsla(0,0%,100%,0) 6px贴彼，新升級Firefox下transparent邊緣會有灰色背景渲染bug潜腻，使用rgba或hsla白色透明表示可修復。
三器仗、CSS3 linear-gradient線性漸變生成加號和減號
要實現(xiàn)一個減號效果非常簡單融涣，例如要實現(xiàn)一個10px*2px的減號圖形，則CSS：
.minus {
? ? background-image: linear-gradient(to top, #666, #666);
? ? background-size: 10px 2px;
}
原理如下精钮，先使用漸變生成一個鋪滿整個元素背景的純色(#666)漸變圖片威鹿，然后使用background-size屬性控制成我們想要的大小，效果就實現(xiàn)了轨香。
加號效果也是類似忽你，只是要多一層linear-gradient的累加。
最終可以實現(xiàn)類似下圖效果：
和傳統(tǒng)::before,?::afetr偽元素配合background-color或border相比臂容，使用漸變背景生成有個非常重要的好處科雳，那就是居中定位非常方便，直接在background屬性后面加個center即可脓杉，而傳統(tǒng)實現(xiàn)通常需要絕對定位糟秘，然后再巴拉巴拉一通代碼來居中，很啰嗦的丽已。
眼見為實蚌堵，您可以狠狠的點擊這里：基于CSS3線性漸變加號和減號圖形demo
四买决、結束語
本文可以說是漸變圖形生成最基本入門沛婴，有個比較著名的CSS紋理網站CSS3 Patterns Gallery，這里面這些地方基本上全部都是使用CSS3漸變實現(xiàn)的督赤，不僅有線性漸變嘁灯，還有徑向漸變。
有興趣的話可以看看躲舌，比如說了解一些全面的實現(xiàn)原理等丑婿，但實際開發(fā)的時候，我們其實用的并不多没卸，反而是本文介紹的這些基礎的簡單實用圖形更加受益羹奉。
對于徑向漸變，我目前玩得還不是很深入约计，等以后發(fā)現(xiàn)好玩的東西給大家介紹诀拭。
好，就這些內容吧煤蚌，權當拋磚引玉耕挨。
