From 17a608c31c5830bab1c2cfe131aa353caab2bd36 Mon Sep 17 00:00:00 2001 From: taiyuan Date: Fri, 20 Aug 2021 09:57:16 +0800 Subject: [PATCH] 优惠券css兼容 --- pages/user/coupons/coupons.wxss | 46 +++++++++++++++++++++++++++++++++++++--------- 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/pages/user/coupons/coupons.wxss b/pages/user/coupons/coupons.wxss index 2c39bbb..e9372b9 100644 --- a/pages/user/coupons/coupons.wxss +++ b/pages/user/coupons/coupons.wxss @@ -416,9 +416,18 @@ page { .coupon { position: relative; - background: radial-gradient(transparent 0, #FFD3D6 0) top left / 200rpx no-repeat, - radial-gradient(transparent 6px, #fff 0), - radial-gradient(transparent 6px, #fff 0); + background: -webkit-radial-gradient(transparent 0, #FFD3D6 0) top left / 200rpx no-repeat, + -webkit-radial-gradient(transparent 6px, #fff 0), + -webkit-radial-gradient(transparent 6px, #fff 0); + background: -moz-radial-gradient(transparent 0, #FFD3D6 0) top left / 200rpx no-repeat, + -moz-radial-gradient(transparent 6px, #fff 0), + -moz-radial-gradient(transparent 6px, #fff 0); + background: -o-radial-gradient(transparent 0, #FFD3D6 0) top left / 200rpx no-repeat, + -o-radial-gradient(transparent 6px, #fff 0), + -o-radial-gradient(transparent 6px, #fff 0); + background: radial-gradient(transparent 0, #FFD3D6 0) top left / 200rpx no-repeat, + radial-gradient(transparent 6px, #fff 0), + radial-gradient(transparent 6px, #fff 0); } @@ -429,8 +438,14 @@ page { width:4px; top: 0; left: 0; - background-image: linear-gradient(to bottom, #FFD3D6 4px, transparent 4px, transparent), - radial-gradient(4px circle at 0px 8px, #f0f0f0 4px, #FFD3D6 4px); + background-image: -webkit-linear-gradient(to bottom, #FFD3D6 4px, transparent 4px, transparent), + -webkit-radial-gradient(4px circle at 0px 8px, #f0f0f0 4px, #FFD3D6 4px); + background-image: -moz-linear-gradient(to bottom, #FFD3D6 4px, transparent 4px, transparent), + -moz-radial-gradient(4px circle at 0px 8px, #f0f0f0 4px, #FFD3D6 4px); + background-image: -o-linear-gradient(to bottom, #FFD3D6 4px, transparent 4px, transparent), + -o-radial-gradient(4px circle at 0px 8px, #f0f0f0 4px, #FFD3D6 4px); + background-image: linear-gradient(to bottom, #FFD3D6 4px, transparent 4px, transparent), + radial-gradient(4px circle at 0px 8px, #f0f0f0 4px, #FFD3D6 4px); background-size: 4px 12px; background-repeat: repeat-y; } @@ -440,10 +455,22 @@ page { /* width: 300px; */ padding: 40rpx 0; position: relative; - background: radial-gradient(circle at right top, transparent 16rpx, #FFD3D6 0) top left / 200rpx 51% no-repeat, - radial-gradient(circle at right bottom, transparent 16rpx, #FFD3D6 0) bottom left /200rpx 51% no-repeat, - radial-gradient(circle at left top, transparent 16rpx, white 0) top right /calc(100% - 200rpx) 51% no-repeat, - radial-gradient(circle at left bottom, transparent 16rpx, white 0) bottom right /calc(100% - 200rpx) 51% no-repeat; + background: -webkit-radial-gradient(circle at right top, transparent 16rpx, #FFD3D6 0) top left / 200rpx 51% no-repeat, + -webkit-radial-gradient(circle at right bottom, transparent 16rpx, #FFD3D6 0) bottom left /200rpx 51% no-repeat, + -webkit-radial-gradient(circle at left top, transparent 16rpx, white 0) top right /calc(100% - 200rpx) 51% no-repeat, + -webkit-radial-gradient(circle at left bottom, transparent 16rpx, white 0) bottom right /calc(100% - 200rpx) 51% no-repeat; + background: -moz-radial-gradient(circle at right top, transparent 16rpx, #FFD3D6 0) top left / 200rpx 51% no-repeat, + -moz-radial-gradient(circle at right bottom, transparent 16rpx, #FFD3D6 0) bottom left /200rpx 51% no-repeat, + -moz-radial-gradient(circle at left top, transparent 16rpx, white 0) top right /calc(100% - 200rpx) 51% no-repeat, + -moz-radial-gradient(circle at left bottom, transparent 16rpx, white 0) bottom right /calc(100% - 200rpx) 51% no-repeat; + background: -o-radial-gradient(circle at right top, transparent 16rpx, #FFD3D6 0) top left / 200rpx 51% no-repeat, + -o-radial-gradient(circle at right bottom, transparent 16rpx, #FFD3D6 0) bottom left /200rpx 51% no-repeat, + -o-radial-gradient(circle at left top, transparent 16rpx, white 0) top right /calc(100% - 200rpx) 51% no-repeat, + -o-radial-gradient(circle at left bottom, transparent 16rpx, white 0) bottom right /calc(100% - 200rpx) 51% no-repeat; + background: radial-gradient(circle at right top, transparent 16rpx, #FFD3D6 0) top left / 200rpx 51% no-repeat, + radial-gradient(circle at right bottom, transparent 16rpx, #FFD3D6 0) bottom left /200rpx 51% no-repeat, + radial-gradient(circle at left top, transparent 16rpx, white 0) top right /calc(100% - 200rpx) 51% no-repeat, + radial-gradient(circle at left bottom, transparent 16rpx, white 0) bottom right /calc(100% - 200rpx) 51% no-repeat; /* filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2)); */ } @@ -586,6 +613,7 @@ page { height: 20rpx; background-image: -webkit-radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent); background-image: -moz-radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent); + background-image: -o-radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent); background-image: radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent); background-size: 40rpx 40rpx; transform: rotate(180deg); -- libgit2 0.21.4