微信小程序优惠券样式

<view class="coupon-view"><view class="coupon-left"></view><view class="coupon-right"></view>
</view>
<!--  -->
.coupon-view {display: flex;position: relative;width: 710rpx;height: 220rpx;margin: 100rpx auto;filter: drop-shadow(4rpx 4rpx 10rpx #808080);
}.coupon-left {background: radial-gradient(circle at top right, transparent 10rpx,  orange 0) top right, radial-gradient(circle at bottom right, transparent 10rpx,  orange 0) bottom right;background-size: 100% 60%;background-repeat: no-repeat;color: #fff;width: 70%;border-radius: 10rpx 0 0 10rpx;
}.coupon-right {background: radial-gradient(circle at top left, transparent 10rpx,  orange 0) top left,radial-gradient(circle at bottom left, transparent 10rpx,  orange 0) bottom left;background-size: 100% 60%;background-repeat: no-repeat;width: 30%;color: #fff;border-radius: 0 10rpx 10rpx 0;
}
.coupon-right::after{content: "";position: absolute;top: 10rpx;height: 200rpx;border-left: 2rpx dashed #fff;
}

微信小程序优惠券样式相关推荐

微信小程序text设置高度_微信小程序字体样式的设置
知识点: 1.常用字体样式属性 2.利用style和class 设置字体样式 3.在app.wxss 和 index.wxss中定义样式常用字体属性: 举列: 项目目录: 运行结果: 在index. ...
微信小程序优惠券到期提醒功能设定指引
微信小程序优惠券到期提醒功能设定指引,在小程序的运营中,优惠券是非常重要的营销方式,也是小程序运营中不可缺少的一种模式,毕竟这对用户来说是直接关系到钱包的事哈,一旦商家将优惠券发放出去或让用户领取 ...
微信小程序CSS样式图片闪烁
微信小程序CSS样式图片闪烁微信小程序直接用CSS样式让图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twi ...
uni-app微信小程序动态样式设置；微信小程序style行内式无效；微信小程序style行内式编译报错；微信小程序:style设置样式
场景:微信小程序设置动态样式,有些时候是需要用到变量来书写的:但是实际使用发现,行内式书写虽然有效,但是会使得微信小程序的编辑失败:故需要使用动态的v-bind来写动态变量行内式样式(既使用:styl ...
微信小程序checkbox样式美化
微信小程序checkbox默认默认样式显得非常不美观,需对其进行样式美化, 样式美化后的结果: 代码如下: html: <checkbox-group data-id="{{item. ...
微信小程序-组件样式覆盖
现在有这样一个需求: 你的页面为home.wxml,你用到了一个组件比如modal.wxml,但是当你把组件引入过来的时候,却发现样式需要做调整? 这下没辙了,我用别人的组件还可以修改别人的样式吗.这 ...
初识微信小程序文本样式设置
创建一个微信小程序,利用class属性设置文本样式,包括:文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等  <view class= ...
微信小程序组件样式修改
微信小程序checkbox.radio.button.switch.swiper组件样式(CSS)修改 1.checkbox样式修改 /*checkbox整体大小*/ checkbox {width: ...
微信小程序 view样式
参考链接: (1)微信小程序View的布局 https://www.jianshu.com/p/862dfa698523 微信小程序样式众多,这里介绍最为常用的view 小程序 View 支持两种布局 ...

微信小程序优惠券样式

微信小程序优惠券样式

微信小程序优惠券样式相关推荐

最新文章

热门文章