border渐变 ios,CSS渐变在iOS上不工作

最新推荐文章于 2023-02-22 17:50:10 发布

言雀

最新推荐文章于 2023-02-22 17:50:10 发布

阅读量237

点赞数

文章标签： border渐变 ios

I have created a gradient background using a CSS generator. This works perfectly in all major browsers and on Android. However in iOS i get this.

What do I need to add to this gradient in order to make it working on iOS?

Edit: Because this question isn't gaining enough attention, I'd like to ask a different question: What do I need for css tag to create a linear gradient for safari/ios, when, as in this case, -webkit-linear-gradient is not working? Are there any other css gradient tags, specifically for safari?

Here's the code for my background:

.gradient {

/* Legacy browsers */

background: #FF7701 url("gradient-bg.png") repeat-x top;

-o-background-size: 100% 100%;

-moz-background-size: 100% 100%;

-webkit-background-size: 100% 100%;

background-size: 100% 100%;

/* Internet Explorer */

*background: #FF7701;

background: #FF7701\0/;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale");

}

@media all and (min-width: 0px) {

.gradient {

/* Opera */

background: #FF7701 url("gradient-bg.svg");

/* Recent browsers */

linear,

left top, left bottom,

from(#FFAD26),

to(#FF7701),

color-stop(0.5, #FEA026),

color-stop(0.5, #FFFFFF),

color-stop(0.5, #FF8B00)

);

top,

#FFAD26,

#FEA026 50%,

#FFFFFF 50%,

#FF8B00 50%,

#FF7701

);

top,

#FFAD26,

#FEA026 50%,

#FFFFFF 50%,

#FF8B00 50%,

#FF7701

);

top,

#FFAD26,

#FEA026 50%,

#FFFFFF 50%,

#FF8B00 50%,

#FF7701

);

top,

#FFAD26,

#FEA026 50%,

#FFFFFF 50%,

#FF8B00 50%,

#FF7701

);

}

解决方案

Do give this a check in iOS but it ought to work:

background: #ffad26; /* Old browsers */

background: -moz-linear-gradient(top, #ffad26 0%, #fea026 50%, #ff8b00 51%, #ff7701 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffad26), color-stop(50%,#fea026), color-stop(51%,#ff8b00), color-stop(100%,#ff7701)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* IE10+ */

background: linear-gradient(to bottom, #ffad26 0%,#fea026 50%,#ff8b00 51%,#ff7701 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffad26', endColorstr='#ff7701',GradientType=0 ); /* IE6-9 */

I'd also recommend looking into a pre-processor like SASS which will generate a lot of these things for you.

Alternative 1

As an alternative, you could try using an inset box shadow. It's not exact, and it has it's limitations but it's just an option :)

background-color:#FF8B00;

-webkit-box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5);

box-shadow: inset 0px 100px 0px 0px rgba(255, 255, 255, 0.5);

Alternative 2

If you know the height, either use the box shadow above or just use a background image. That way you'll get cross-browser support without the mess that is a hundred prefixed CSS properties like above :)