效果如下：
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 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 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 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 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 64rpx; 104 height: 1rpx; 105 background: #fff; 106 margin-left: 60rpx; 107 margin-bottom: -20rpx; 108 } 109 110 .co .co_l { 111 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