效果如下：
css3實現優惠券
知識儲備
- 顏色漸變 linear-gradient()
- css偽類 :before :after
index.wxss
1 .app { 2 /* padding: 20rpx 40rpx; */ 3 padding: 20rpx; 4 background: #eee; 5 } 6 .wrapper { 7 margin: 0 auto; 8 width: 100%; 9 display: flex; 10 background:linear-gradient(-90deg,rgba(250,173,82,1),rgba(254,50,103,1)); 11 /*實現顏色漸變 */ 12 } 13 /*前半部分樣式*/ 14 .content { 15 position: relative; 16 flex: 1; 17 padding: 20rpx 30rpx; 18 text-align: center; 19 } 20 /*后半部分樣式*/ 21 .tip { 22 position: relative; 23 padding: 50rpx 30rpx; 24 flex: 0 0 200rpx; 25 text-align: center; 26 } 27 /*中間豎直虛線樣式*/ 28 .split-line { 29 position: relative; 30 flex: 0 0 0; 31 margin: 0 10rpx 0 6rpx; 32 border-left: 4rpx dashed #eee; 33 } 34 /*給虛線加兩個偽類，基本樣式如下*/ 35 .split-line:before, .split-line:after { 36 content: ''; 37 position: absolute; 38 width: 32rpx; 39 height: 16rpx; 40 background: #eee; 41 left: -18rpx; 42 z-index: 1; 43 } 44 /*給前半部分加兩個偽類，基本樣式如下*/.content:before, .content:after{ 45 content: ''; 46 position: absolute; 47 width: 32rpx; 48 height: 16rpx; 49 background: #eee; 50 left: -16rpx; 51 z-index: 1; 52 } 53 54 /*給前半部分加兩個偽類，基本樣式如下*/ 55 .tip:before, .tip:after{ 56 content: ''; 57 position: absolute; 58 width: 32rpx; 59 height: 16rpx; 60 background:#eee; 61 right: -16rpx; 62 z-index: 1; 63 } 64 /*幾個偽類化成的圓弧的樣式以及位置（置於頂部）我把它放在一起了*/ 65 .content:before, .tip:before, .split-line:before{ 66 border-radius: 0 0 16rpx 16rpx; 67 top: 0; 68 } 69 70 /*幾個偽類化成的圓弧的樣式以及位置（置於底部）我把它放在一起了*/ 71 .content:after, .tip:after, .split-line:after{ 72 border-radius: 16rpx 16rpx 0 0; 73 bottom: 0; 74 } 75 76 .money { 77 font-size: 110rpx; 78 color: #eee; 79 } 80 .money text { 81 font-size: 50rpx; 82 padding-right: 20rpx; 83 } 84 .title { 85 color: #eee; 86 font-size: 30rpx; 87 } 88 .conditions { 89 color: #eee; 90 font-size: 30rpx; 91 padding:15rpx; 92 } 93 .useNow { 94 color: rgba(254,50,103,1); 95 font-size: 30rpx; 96 border-radius: 50rpx; 97 border-style: none; 98 } 99 .co { 100 padding-top:10rpx; 101 } 102 .co .co_w { 103 width: 64rpx; 104 height: 1rpx; 105 background: #fff; 106 margin-left: 60rpx; 107 margin-bottom: -20rpx; 108 } 109 110 .co .co_l { 111 width: 64rpx; 112 height: 1rpx; 113 background: #fff; 114 margin-left: 260rpx; 115 margin-top: -15rpx; 116 } 117 index.wxml 118 <view class="app"> 119 <view class="wrapper"> 120 <view class="content"> 121 <view class="money"> 122 <text>¥</text>50 123 </view> 124 <view class='co'> 125 <view class='co_w'></view> 126 <view class="title"> 127 優惠券 128 </view> 129 <view class='co_l'></view> 130 </view> 131 </view> 132 <view class="split-line"></view> 133 <view class="tip"> 134 <view class="conditions"> 135 滿500元使用 136 </view> 137 <button class="useNow" bindtap=""> 138 立即使用 139 </button> 140 </view> 141 </view> 142 </view> 143