丁香花完整视频在线观看-午夜爽爽爽-亚洲777-女同一区二区-国产伊人网-国产乱码精品一品二品-天堂色av-伊人影院av-午夜中文字幕-久久精品片-男女视频在线观看免费-中文字幕久久网-欧美www视频-非洲黑妞xxxxhd精品-亚洲午夜精品在线-亚洲中午字幕-精品国产aⅴ-日本高清视频在线-成年人免费大片-亚洲精品视频在线免费

對于css3的漸變前端的童鞋一定不陌生，在一些電商網站會為了美化將地址選擇
做成信封樣式（個人感覺很稀飯~），看了一下它的實現方式，大多數是以圖片的形式，
持著優化的心態嘗試著用css3 linear-gradient實現信封效果一下是效果圖

下面我們開始嘍~

html結構如下：

<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寫漸變，首先我們先來分析一下圖上邊的漸變其實一共有三個顏色白色、
紅色和藍色。我們都知道在用linear-gradient的時候除了最開始的時候定義漸變的角度我們還要定義顏色
和顏色所占的比例，顏色我們現在已經知道了，那么我們現在來說一下這個比例怎么確定。

觀察效果圖我們可以找到規律一個紅色、一個白色、一個藍色、一個白色為一個循環，
那么我們的規律數為4，我們的比例用100%/（我們的規律數*2）=12.5%就是我們的比例。
解釋一下為什么要用我們的規律數*2,不應該是規律數是一個組合嗎？
NO!把一個組合數的顏色放在一個正方體里邊，為了方便大家理解p了一個效果圖

這個應該很直觀了我們把大的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;
    }

為了達到效果并沒有做兼容，大家在實際工作中使用linear-gradient記得要加前綴~