wxd / MShopWeApp

Commit 17a608c31c5830bab1c2cfe131aa353caab2bd36

Authored by taiyuan
1 parent 4ef8f9cc

优惠券css兼容

Inline Side-by-side
Showing 1 changed file with 37 additions and 9 deletions
pages/user/coupons/coupons.wxss
  View file @17a608c
@@ -416,9 +416,18 @@ page { @@ -416,9 +416,18 @@ page {
416 .coupon { 416 .coupon {
417 position: relative; 417 position: relative;
418 418
419 - background: radial-gradient(transparent 0, #FFD3D6 0) top left / 200rpx no-repeat,  
420 - radial-gradient(transparent 6px, #fff 0),  
421 - radial-gradient(transparent 6px, #fff 0); 419 + background: -webkit-radial-gradient(transparent 0, #FFD3D6 0) top left / 200rpx no-repeat,
  420 + -webkit-radial-gradient(transparent 6px, #fff 0),
  421 + -webkit-radial-gradient(transparent 6px, #fff 0);
  422 + background: -moz-radial-gradient(transparent 0, #FFD3D6 0) top left / 200rpx no-repeat,
  423 + -moz-radial-gradient(transparent 6px, #fff 0),
  424 + -moz-radial-gradient(transparent 6px, #fff 0);
  425 + background: -o-radial-gradient(transparent 0, #FFD3D6 0) top left / 200rpx no-repeat,
  426 + -o-radial-gradient(transparent 6px, #fff 0),
  427 + -o-radial-gradient(transparent 6px, #fff 0);
  428 + background: radial-gradient(transparent 0, #FFD3D6 0) top left / 200rpx no-repeat,
  429 + radial-gradient(transparent 6px, #fff 0),
  430 + radial-gradient(transparent 6px, #fff 0);
422 } 431 }
423 432
424 433
@@ -429,8 +438,14 @@ page { @@ -429,8 +438,14 @@ page {
429 width:4px; 438 width:4px;
430 top: 0; 439 top: 0;
431 left: 0; 440 left: 0;
432 - background-image: linear-gradient(to bottom, #FFD3D6 4px, transparent 4px, transparent),  
433 - radial-gradient(4px circle at 0px 8px, #f0f0f0 4px, #FFD3D6 4px); 441 + background-image: -webkit-linear-gradient(to bottom, #FFD3D6 4px, transparent 4px, transparent),
  442 + -webkit-radial-gradient(4px circle at 0px 8px, #f0f0f0 4px, #FFD3D6 4px);
  443 + background-image: -moz-linear-gradient(to bottom, #FFD3D6 4px, transparent 4px, transparent),
  444 + -moz-radial-gradient(4px circle at 0px 8px, #f0f0f0 4px, #FFD3D6 4px);
  445 + background-image: -o-linear-gradient(to bottom, #FFD3D6 4px, transparent 4px, transparent),
  446 + -o-radial-gradient(4px circle at 0px 8px, #f0f0f0 4px, #FFD3D6 4px);
  447 + background-image: linear-gradient(to bottom, #FFD3D6 4px, transparent 4px, transparent),
  448 + radial-gradient(4px circle at 0px 8px, #f0f0f0 4px, #FFD3D6 4px);
434 background-size: 4px 12px; 449 background-size: 4px 12px;
435 background-repeat: repeat-y; 450 background-repeat: repeat-y;
436 } 451 }
@@ -440,10 +455,22 @@ page { @@ -440,10 +455,22 @@ page {
440 /* width: 300px; */ 455 /* width: 300px; */
441 padding: 40rpx 0; 456 padding: 40rpx 0;
442 position: relative; 457 position: relative;
443 - background: radial-gradient(circle at right top, transparent 16rpx, #FFD3D6 0) top left / 200rpx 51% no-repeat,  
444 - radial-gradient(circle at right bottom, transparent 16rpx, #FFD3D6 0) bottom left /200rpx 51% no-repeat,  
445 - radial-gradient(circle at left top, transparent 16rpx, white 0) top right /calc(100% - 200rpx) 51% no-repeat,  
446 - radial-gradient(circle at left bottom, transparent 16rpx, white 0) bottom right /calc(100% - 200rpx) 51% no-repeat; 458 + background: -webkit-radial-gradient(circle at right top, transparent 16rpx, #FFD3D6 0) top left / 200rpx 51% no-repeat,
  459 + -webkit-radial-gradient(circle at right bottom, transparent 16rpx, #FFD3D6 0) bottom left /200rpx 51% no-repeat,
  460 + -webkit-radial-gradient(circle at left top, transparent 16rpx, white 0) top right /calc(100% - 200rpx) 51% no-repeat,
  461 + -webkit-radial-gradient(circle at left bottom, transparent 16rpx, white 0) bottom right /calc(100% - 200rpx) 51% no-repeat;
  462 + background: -moz-radial-gradient(circle at right top, transparent 16rpx, #FFD3D6 0) top left / 200rpx 51% no-repeat,
  463 + -moz-radial-gradient(circle at right bottom, transparent 16rpx, #FFD3D6 0) bottom left /200rpx 51% no-repeat,
  464 + -moz-radial-gradient(circle at left top, transparent 16rpx, white 0) top right /calc(100% - 200rpx) 51% no-repeat,
  465 + -moz-radial-gradient(circle at left bottom, transparent 16rpx, white 0) bottom right /calc(100% - 200rpx) 51% no-repeat;
  466 + background: -o-radial-gradient(circle at right top, transparent 16rpx, #FFD3D6 0) top left / 200rpx 51% no-repeat,
  467 + -o-radial-gradient(circle at right bottom, transparent 16rpx, #FFD3D6 0) bottom left /200rpx 51% no-repeat,
  468 + -o-radial-gradient(circle at left top, transparent 16rpx, white 0) top right /calc(100% - 200rpx) 51% no-repeat,
  469 + -o-radial-gradient(circle at left bottom, transparent 16rpx, white 0) bottom right /calc(100% - 200rpx) 51% no-repeat;
  470 + background: radial-gradient(circle at right top, transparent 16rpx, #FFD3D6 0) top left / 200rpx 51% no-repeat,
  471 + radial-gradient(circle at right bottom, transparent 16rpx, #FFD3D6 0) bottom left /200rpx 51% no-repeat,
  472 + radial-gradient(circle at left top, transparent 16rpx, white 0) top right /calc(100% - 200rpx) 51% no-repeat,
  473 + radial-gradient(circle at left bottom, transparent 16rpx, white 0) bottom right /calc(100% - 200rpx) 51% no-repeat;
447 /* filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2)); */ 474 /* filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2)); */
448 } 475 }
449 476
@@ -586,6 +613,7 @@ page { @@ -586,6 +613,7 @@ page {
586 height: 20rpx; 613 height: 20rpx;
587 background-image: -webkit-radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent); 614 background-image: -webkit-radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent);
588 background-image: -moz-radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent); 615 background-image: -moz-radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent);
  616 + background-image: -o-radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent);
589 background-image: radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent); 617 background-image: radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent);
590 background-size: 40rpx 40rpx; 618 background-size: 40rpx 40rpx;
591 transform: rotate(180deg); 619 transform: rotate(180deg);