對于css3的漸變前端的童鞋一定不陌生，在一些電商網(wǎng)站會(huì)為了美化將地址選擇
做成信封樣式（個(gè)人感覺很稀飯~），看了一下它的實(shí)現(xiàn)方式，大多數(shù)是以圖片的形式，
持著優(yōu)化的心態(tài)嘗試著用css3 linear-gradient實(shí)現(xiàn)信封效果一下是效果圖
下面我們開始嘍~
html結(jié)構(gòu)如下：
<div class="letter-box">
<div class="letter-border">
</div>
</div>
css樣式如下：
.letter-box{
width: 278px;
height: 176px;
padding: 5px;
box-sizing: border-box;
}
.letter-border{
width: 100%;
height: 100%;
background: #fbfaf5;
}
漸變是寫在letter-box上的，然后letter-border用顏色遮住中間的部分。
接下來我們對letter-box寫漸變，首先我們先來分析一下圖上邊的漸變其實(shí)一共有三個(gè)顏色白色、
紅色和藍(lán)色。我們都知道在用linear-gradient的時(shí)候除了最開始的時(shí)候定義漸變的角度我們還要定義顏色
和顏色所占的比例，顏色我們現(xiàn)在已經(jīng)知道了，那么我們現(xiàn)在來說一下這個(gè)比例怎么確定。
觀察效果圖我們可以找到規(guī)律一個(gè)紅色、一個(gè)白色、一個(gè)藍(lán)色、一個(gè)白色為一個(gè)循環(huán)，
那么我們的規(guī)律數(shù)為4，我們的比例用100%/（我們的規(guī)律數(shù)*2）=12.5%就是我們的比例。
解釋一下為什么要用我們的規(guī)律數(shù)*2,不應(yīng)該是規(guī)律數(shù)是一個(gè)組合嗎？
NO!把一個(gè)組合數(shù)的顏色放在一個(gè)正方體里邊，為了方便大家理解p了一個(gè)效果圖
這個(gè)應(yīng)該很直觀了我們把大的box看成是以小正方體為單位repeat的就可以了
.letter-box{
width: 278px;
height: 176px;
padding: 5px;
box-sizing: border-box;
background: linear-gradient(45deg,#f25953 12.5%,#fbfaf5 12.5%,#fbfaf5 25%,#5590d6 25%,
#5590d6 37.5%,#fbfaf5 37.5%,#fbfaf5 50%,#f25953 50%,#f25953 62.5%,
#fbfaf5 62.5%,#fbfaf5 75%,#5590d6 75%,#5590d6 87.5%,#fbfaf5 87.5%,#fbfaf5 100%);
background-size: 70px 70px;
}
為了達(dá)到效果并沒有做兼容，大家在實(shí)際工作中使用linear-gradient記得要加前綴~
【 微信掃一掃 】
