Safari中的线性渐变不起作用答案

【问题标题】：Linear gradient in safari not workingSafari中的线性渐变不起作用
【发布时间】：2016-04-25 05:34:18
【问题描述】：

线性渐变背景属性在 safari 浏览器中不起作用。我也尝试使用 -webkit- 前缀但没有结果。怎么了？

代码如下：

html:

 <header>
    <div class="container">
      <div class="logo">
      <img src="images/logo.png" alt=""/>
      </div>
   </div>
</header>

css:

.container{max-width:1550px;margin:0 auto;border:1px solid red;}
.clear{clear:both;}
header{width:100%;float:left;position:relative;background:linear-gradient(to right,  #e9eae2 0%,#e9eae2 59%,#7acec3 59%,#7acec3 100%);background:-webkit-linear-gradient(to right,#e9eae2 0%,#e9eae2 59%,#e9eae2 59%,#e9eae2 100%);}
.logo{float:left;}

【问题讨论】：

标签： css safari

【解决方案1】：

尝试对线性渐变使用所有前缀：

background: -moz-linear-gradient(0deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);/* FF3.6+ */
background: -webkit-gradient(linear, 0deg, color-stop(0%, #e9eae2), color-stop(59%, #e9eae2), color-stop(59%, #7acec3), color-stop(100%, #7acec3));/* Chrome,Safari4+ */
background: -webkit-linear-gradient(0deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(0deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);/* Opera 11.10+ */
background: -ms-linear-gradient(0deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);/* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9eae2', endColorstr='#7acec3', GradientType='1'); /* for IE */
background: linear-gradient(90deg, #e9eae2 0%, #e9eae2 59%, #7acec3 59%, #7acec3 100%);

【讨论】：

【解决方案2】：

嗨，线性渐变在 safari 中运行良好，我尝试了一些不同的颜色，如前所述尝试使用所有前缀：

header{width:100%;float:left;position:relative;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87e0fd+0,53cbf1+40,05abe0+100;Blue+3D+%23+16 */
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
}

【讨论】：