前端入坑紀 61

今天來分享 有次在app上看到的折扣券的圖

好，詳解如下！

OK，first things first！ 點我查看實際效果

愛是一道光,折扣多不慌

HTML 結構

        <div class="quan clear">
            <div class="quanLeft">
                <p class="money">￥ 10</p>
                <p class="tit">美味立享折扣券</p>
                <p class="conts">無滿額限制,立減折扣</p>
                <p class="dates">有效期: 2018.8.12 - 2019.8.12</p>
            </div>
            <div class="quanRight">
                <p class="ft">折扣券</p> 
                <p class="sd">官網(wǎng)使用</p>
            </div>
        </div>

div. quan 負責繪制最左側鋸齒, div. quanLeft負責繪制中間的圓點線, div. quanRight 負責繪制最右側鋸齒

CSS 結構

           .quan{
            position: relative;
            width: 96%;
            margin: 5% auto;
            padding: 6px;
            padding-right:0;
            box-sizing: border-box;
            background-color: #ff6347;
            color: #fff;
            background-image: radial-gradient(#fff 35%,#ff6374 35%);
            background-size: 17px 17px;
            background-position: -9px 0;
            background-repeat: repeat-y
        }

完全的css在示例里了,這里粘貼關鍵的css. 通過使用 radial-gradient漸變方法來得到效果.這個設置的原理和前面有一篇進度條是一樣的,把漸變限制在一定范圍,這樣顏色就出現(xiàn)了很明顯的隔斷,而沒有過渡.

將通過radial-gradient漸變生成的圓形,豎著排開,定位到相應的位置上.以最左側為例,白色的圓圈,覆蓋在橘色的邊緣上,頁面最底下是白色的背景，這樣自然就有了鋸齒的效果.其他兩條,同理.

好了，到此，本文告一段落！感謝您的閱讀！祝你身體健康，闔家幸福！

打開支付寶首頁搜 625097528 領紅包，領到大紅包的小伙伴趕緊使用哦！

支持你我，掃一掃紅包