CSS不用背景圖片實現優惠券樣式反圓角,凹圓角,反向半圓角,並且背景漸變

帥帥的小毛驢發表於2021-01-25
CSS

    日常開發過程中，特別是商城相關應用開發過程中，時常會遇到花裡胡哨的設計圖，比如優惠券樣式，上圖：

    

 

    實現思路如下：

    1.先寫一個外容器，實現背景色漸變：

    Html：

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 }

 

    效果：

    

    2.裡面寫左右兩個容器，分別放置文字和按鈕：

    Html：

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 　　　　}

    效果：

 

   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，搞定收工，拿碗排隊打飯！

 

    如果有幫助到你，可以的話請幫我點個贊吧，謝謝~

 

    

相關文章