小程序中css3实现优惠券

效果如下：

css3实现优惠券

知识储备

• 颜色渐变 linear-gradient()
• css伪类 :before :after

index.wxss

.app {
  /* padding: 20rpx 40rpx; */
  padding: 20rpx;
  background: #eee; } .wrapper { margin: 0 auto; width: 100%; display: flex; background:linear-gradient(-90deg,rgba(250,173,82,1),rgba(254,50,103,1)); /*实现颜色渐变 */ }
/*前半部分样式*/ .content { position: relative; flex: 1; padding: 20rpx 30rpx; text-align: center; }
/*后半部分样式*/ .tip { position: relative; padding: 50rpx 30rpx; flex: 0 0 200rpx; text-align: center; }
/*中间竖直虚线样式*/ .split-line { position: relative; flex: 0 0 0; margin: 0 10rpx 0 6rpx; border-left: 4rpx dashed #eee; }
/*给虚线加两个伪类，基本样式如下*/ .split-line:before, .split-line:after { content: ''; position: absolute; width: 32rpx; height: 16rpx; background: #eee; left: -18rpx; z-index: 1; }

/*给前半部分加两个伪类，基本样式如下*/.content:before, .content:after{

 content: ''; position: absolute; width: 32rpx; height: 16rpx; background: #eee; left: -16rpx; z-index: 1; }

/*给前半部分加两个伪类，基本样式如下*/

.tip:before, .tip:after{ content: ''; position: absolute; width: 32rpx; height: 16rpx; background:#eee; right: -16rpx; z-index: 1; }

/*几个伪类化成的圆弧的样式以及位置（置于顶部）我把它放在一起了*/ .content:before, .tip:before, .split-line:before{ border-radius: 0 0 16rpx 16rpx; top: 0; }

/*几个伪类化成的圆弧的样式以及位置（置于底部）我把它放在一起了*/

.content:after, .tip:after, .split-line:after{ border-radius: 16rpx 16rpx 0 0; bottom: 0; }  .money { font-size: 110rpx; color: #eee; } .money text { font-size: 50rpx; padding-right: 20rpx; } .title { color: #eee; font-size: 30rpx; } .conditions { color: #eee; font-size: 30rpx; padding:15rpx; } .useNow { color: rgba(254,50,103,1); font-size: 30rpx; border-radius: 50rpx; border-style: none; } .co { padding-top:10rpx; } .co .co_w { width: 64rpx; height: 1rpx; background: #fff; margin-left: 60rpx; margin-bottom: -20rpx; } .co .co_l { width: 64rpx; height: 1rpx; background: #fff; margin-left: 260rpx; margin-top: -15rpx; } index.wxml

<view class="app">
  <view class="wrapper"> <view class="content"> <view class="money"> <text>¥</text>50 </view> <view class='co'> <view class='co_w'></view> <view class="title"> 优惠券 </view> <view class='co_l'></view> </view> </view> <view class="split-line"></view> <view class="tip"> <view class="conditions"> 满500元使用 </view> <button class="useNow" bindtap=""> 立即使用 </button> </view> </view> </view>