css3 渐变不适用于所有浏览器
css3 gradient does not work on all browsers
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;">
请检查添加渐变的方式
EX:
<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 从内联文件移动到外部 CSS 文件,以便分离 HTML 和 CSS 的问题。然后,正如 vignesh 指出的那样,您必须考虑浏览器供应商前缀。您可以手动编写它们,但最好的方法是使用某种自动化,我个人推荐 Sass with either Compass or Bourbon or, preferred, if you work with Gulp use gulp-autoprefixer - this will not only add the needed prefixes automatically but also it will let you use a much easier way to write css3 features such as gradients using mixins.
如果您需要 IE9 的支持,请使用 SVG(也适用于所有其他 none 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;
}
<div class="gradient"></div>
原始 SVG(在上面的示例中进行了 urlencode)
<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>
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;">
请检查添加渐变的方式
EX:
<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 从内联文件移动到外部 CSS 文件,以便分离 HTML 和 CSS 的问题。然后,正如 vignesh 指出的那样,您必须考虑浏览器供应商前缀。您可以手动编写它们,但最好的方法是使用某种自动化,我个人推荐 Sass with either Compass or Bourbon or, preferred, if you work with Gulp use gulp-autoprefixer - this will not only add the needed prefixes automatically but also it will let you use a much easier way to write css3 features such as gradients using mixins.
如果您需要 IE9 的支持,请使用 SVG(也适用于所有其他 none 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;
}
<div class="gradient"></div>
原始 SVG(在上面的示例中进行了 urlencode)
<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>