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 416 .coupon {
417 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 438 width:4px;
430 439 top: 0;
431 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 449 background-size: 4px 12px;
435 450 background-repeat: repeat-y;
436 451 }
... ... @@ -440,10 +455,22 @@ page {
440 455 /* width: 300px; */
441 456 padding: 40rpx 0;
442 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 474 /* filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2)); */
448 475 }
449 476  
... ... @@ -586,6 +613,7 @@ page {
586 613 height: 20rpx;
587 614 background-image: -webkit-radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent);
588 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 617 background-image: radial-gradient(circle, #FFD3D6, #FFD3D6 20rpx, transparent 20rpx, transparent);
590 618 background-size: 40rpx 40rpx;
591 619 transform: rotate(180deg);
... ...