css3 渐变不适用于所有浏览器答案

【问题标题】：css3 gradient does not work on all browserscss3 渐变不适用于所有浏览器
【发布时间】：2016-07-30 10:18:30
【问题描述】：

css3 渐变不适用于所有浏览器它仅适用于 chrome 我的代码

<nav class="navbar navbar-default navbar-fixed-top" style="background: -webkit-gradient(linear, 31% 60%, 24% 96%, from(#0071BC), to(#FFFFFF), color-stop(.5,#0071BC)) !important; background: -o-gradient(linear, 31% 60%, 24% 96%, from(#0071BC), to(#FFFFFF), color-stop(.5,#0071BC)) !important; background: -moz-gradient(linear, 31% 60%, 24% 96%, from(#0071BC), to(#FFFFFF), color-stop(.5,#0071BC)) !important; border:2px white solid !important;box-shadow:black 2px 2px 2px;padding-bottom:40px; min-height:100px !important;border-bottom-right-radius: 20% !important;border-bottom-left-radius: 20% !important;">

【问题讨论】：

标签： html css gradient linear-gradients

【解决方案1】：

请检查添加渐变的方式

前：

<nav class="navbar navbar-default navbar-fixed-top" style="fill: #55bbeb;
    background: #55bbeb;
    background: -moz-linear-gradient(90deg, #55bbeb 0%, #84c450 100%);
    background: -webkit-linear-gradient(90deg, #55bbeb 0%, #84c450 100%);
    background: -o-linear-gradient(90deg, #55bbeb 0%, #84c450 100%);
    background: -ms-linear-gradient(90deg, #55bbeb 0%, #84c450 100%);
    background: linear-gradient(90deg, #55bbeb 0%, #84c450 100%);">

【讨论】：

请确保不要有任何 css 内联，因为 @alberto2000 放弃了..谢谢！

【解决方案2】：

如果您需要 IE9 的支持，请使用 SVG（也适用于所有其他非 IE 浏览器，因此无需后备）

div {
  height: 200px;
}
.gradient {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'%3E    %3Cdefs%3E    %3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E      %3Cstop offset='0%25' style='stop-color:rgb(255,255,0);stop-opacity:1' /%3E      %3Cstop offset='100%25' style='stop-color:rgb(255,0,0);stop-opacity:1' /%3E    %3C/linearGradient%3E  %3C/defs%3E  %3Crect width='100' height='100' fill='url(%23grad1)' /%3E%3C/svg%3E") center / cover;
}

&lt;div class="gradient"&gt;&lt;/div&gt;

原始 SVG（在上面的示例中进行了 urlencoded）

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'>
    <defs>
    <linearGradient id='grad1' x1='0%' y1='0%' x2='100%' y2='0%'>
      <stop offset='0%' style='stop-color:rgb(255,255,0);stop-opacity:1' />
      <stop offset='100%' style='stop-color:rgb(255,0,0);stop-opacity:1' />
    </linearGradient>
  </defs>
  <rect width='100' height='100' fill='url(#grad1)' />
</svg>

【讨论】：

【解决方案3】：

首先，您应该将您的 CSS 从内联移至外部 CSS 文件，以便分离 HTML 和 CSS 的关注点。然后，正如vignesh 所指出的，您必须考虑浏览器供应商前缀。您可以手动编写它们，但最好的方法是使用某种自动化，我个人推荐Sass 与Compass 或Bourbon 或者，如果您使用Gulp 使用gulp-autoprefixer 是首选 -这不仅会自动添加所需的前缀，还会让您使用更简单的方法来编写 css3 功能，例如使用 mixins 的渐变。

【讨论】：