radial-gradient CSS3的蛋疼的径向渐变 遇到苹果手机没有效果，安卓手机可以,解决办法就是没写好，苹果手机不识别所写的

 

参考网址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient

http://www.divcss5.com/css3book/values/image/radial-gradient().htm

https://www.cnblogs.com/xiaohuochai/p/5383285.html

 

菜鸡路过，大神多指点

.coupon {

position: relative;

overflow: hidden;

display: flex;

display: -webkit-flex; /* Safari */

position: relative;

border-radius: 5px;

border-top-left-radius:5px;

border-bottom-left-radius:5px;

background: #fff;

margin: 0 auto;

background: #fbfbfb !important;

}

.coupon-bg {

background: #fbfbfb !important;

padding-right: 16px !important;

margin-bottom: 10px;

}

.coupon-diabled {

background:#c3c3c3;color:#666;

}

.coupon-left {

background: #f45749;

position: relative;

z-index: 0;

-webkit-flex: 1;

flex: 1;

/* for uc */

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

}

.coupon-center {

padding: 6px 10px;

-ms-flex: 2; /* IE 10 */

-webkit-flex: 2;

flex: 2;

/* for uc */

-webkit-box-flex: 2;

-moz-box-flex: 2;

background:#fff;

}

 

.coupon-right {

width: 17px;

padding: 10px;

align-content:stretch;

position: relative;

background:#fff;

border-left:2px dashed rgba(244,87,73,.5);

}

.coupon-left:before {

content: '';

position: absolute;

top: 0;

bottom: 0;

left: 10px;

right: 0px;

z-index: -1;

}

.coupon-item {

position: relative;

background: #f22824;

background:-webkit-linear-gradient(left top,#f22824,#f8a787);

background:-moz-linear-gradient(left top,#f22824,#f8a787);

background:-ms-linear-gradient(left top,#f22824,#f8a787);

background:-o-linear-gradient(left top,#f22824,#f8a787);

background:linear-gradient(to left top,#f22824,#f8a787);

}

.coupon-item:after {

content: "";

position: absolute;

height: 100%;

width: 15px;

left: -8px;

right: 0;

bottom: 0px;

background: -webkit-radial-gradient(circle farthest-corner at 6px 6px, #f5f5f9 6px, transparent 2px);

background: -o-radial-gradient(circle farthest-corner at 6px 6px, #f5f5f9 6px, transparent 2px);

background: -moz-radial-gradient(circle farthest-corner at 6px 6px, #f5f5f9 6px, transparent 2px);

background: radial-gradient(circle farthest-corner at 6px 6px, #f5f5f9 6px, transparent 2px);

background-size: 15px 15px;

}

 

.coupon-left .coupon-inner{padding: 5px; color: #fff;}

.coupon-right .coupon-inner{color: #f45749;}

.coupon-circle{display:inline-block;width:16px;height:16px;background:#f5f5f9;position: absolute;left:-9px;border-radius:50%}

.coupon-circle.top{top:-8px;}

.coupon-circle.bottom{bottom:-8px;}

.coupon-money .sum{font-size:24px;}

.inline-block {display: inline-block}

.coupon-money,.coupon-time{margin-top:12px; text-align: center;}

.coupon-condition {text-align: center; padding-top: 20px;}

.coupon-condition .inline-des {font-size: 12px;}

.cunpon-name {font-size: 32rpx; color: #444;}

.cunpon-limit {

font-size: 14px;

color: #999;

margin-top: 5px;

text-overflow:

-o-ellipsis-lastline;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

line-clamp: 2;

-webkit-box-orient: vertical;

}

.coupon-use {

position: absolute;

top: 50%;

margin-top: -32px; /* margin-top值为自身高度的一半 */

bottom: 0;

height: 64px;

width: 16px;

font-size: 16px;

padding:0;

}

.cunpon-time {font-size: 14px; margin-top: 8px;}

 

以上代码是可用的，

 

一下代码红色渐变在苹果手机就不可用，神奇吧

.coupon-left:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    right: 0px;
    z-index: -1;
}
.coupon-item {
   position: relative;
   background: #f22824;
   background:-webkit-linear-gradient(left top,#f22824,#f8a787);
   background:-moz-linear-gradient(left top,#f22824,#f8a787);
   background:-ms-linear-gradient(left top,#f22824,#f8a787);
   background:-o-linear-gradient(left top,#f22824,#f8a787);
   background:linear-gradient(to left top,#f22824,#f8a787);
}
.coupon-item:after {
   content: "";
   position: absolute;
   height: 100%;
   width: 15px;
   left: -8px;
   right: 0;
   bottom: 0px;
   background: -webkit-radial-gradient(6px circle, #fbfbfb, #fbfbfb 6px, transparent 2px);
   background: -o-radial-gradient(6px circle, #fbfbfb, #fbfbfb 6px, transparent 2px);
   background: -moz-radial-gradient(6px circle, #fbfbfb, #fbfbfb 6px, transparent 2px);
   background: radial-gradient(6px circle, #fbfbfb, #fbfbfb 6px, transparent 2px);
   background-size: 15px 15px;
}