平常開發過程當中,特別是商城相關應用開發過程當中,時常會遇到花裏胡哨的設計圖,好比優惠券樣式,上圖:css
實現思路以下:web
1.先寫一個外容器,實現背景色漸變:flex
Html:spa
1 <div class="coupon"> 2 </div>
Css:設計
1 .coupon { 2 width: 600px; 3 height: 110px; 4 background: -webkit-linear-gradient(left, #d34b5a, #c64765); 5 background: -o-linear-gradient(left, #d34b5a, #c64765); 6 background: -moz-linear-gradient(left, #d34b5a, #c64765); 7 border-radius: 16px; 8 display: flex; 9 flex-direction: row; 10 }
效果:code
2.裏面寫左右兩個容器,分別放置文本和按鈕:blog
Html:ci
1 <div class="coupon"> 2 <div class="coupon_text"> 3 優惠券<text>¥20</text> 4 <span>使用期限:2021.01.21-2021.02.21</span> 5 </div> 6 <div class="coupon_btn"> 7 <span>當即領取</span> 8 </div> 9 </div>
Css:開發
1 .coupon_text { 2 flex: 1; 3 color: white; 4 padding: 25px 30px 20px 40px; 5 font-size: 20px; 6 position: relative; 7 } 8 9 .coupon_text > b { 10 font-size: 30px; 11 } 12 13 .coupon_text > div { 14 font-size: 15px; 15 } 16 17 .coupon_btn { 18 border: none; 19 height: 110px; 20 line-height: 110px; 21 padding: 0 40px; 22 } 23 24 .coupon_btn > span { 25 background: -webkit-linear-gradient(top, #fae8e9, #f2a799); 26 background: -o-linear-gradient(top, #fae8e9, #f2a799); 27 background: -moz-linear-gradient(top, #fae8e9, #f2a799); 28 padding: 10px 20px; 29 vertical-align: middle; 30 font-size: 24px; 31 border-radius: 30px; 32 color: #E41F19; 33 }
效果:it
3.畫圓角和虛線:
咱們在 .coupon_text 樣式裏添加css代碼:
1 background-image: radial-gradient(circle at right top, #fff, #fff 15px, transparent 16px),
radial-gradient(circle at right bottom, #fff, #fff 15px, transparent 16px); 2 border-right: 1px dashed #FFF;
再在 .coupon_btn 樣式裏添加以下代碼:
1 background-image: radial-gradient(circle at left top, #fff, #fff 15px, transparent 16px),
radial-gradient(circle at left bottom, #fff, #fff 15px, transparent 16px);
查看效果:
這個……好像和想象中有點不同呀,不只有白色的虛線,爲啥還有紅色的虛線呢?
那是由於前面咱們外層class爲coupon的div,設置了背景色,上層div的邊框在虛線的地方是透明的,因此會間斷顯示紅色背景,就成爲咱們看到的紅色虛線了;
在這裏提供一個逼死強迫症的解決方案:
把class爲coupon_btn的div,向左移動1px;將那根背景爲紅色的虛線擋住就好了。
.coupon_text { margin-right: -1px; } /* 或者 */ .coupon_btn { margin-left: -1px; }
便可看到咱們想要的效果:
固然,實現上述設計圖的方法有不少,歡迎交流~
OK,搞定收工,拿碗排隊打飯!
若是有幫助到你,能夠的話請幫我點個贊吧,謝謝~