请求将指定Moz内核CSS渐变代码转换为多浏览器兼容版本
多浏览器兼容的线性渐变CSS代码
没问题,这是针对你提供的Moz内核渐变,适配各主流浏览器的兼容版本:
background: #DDDDDD; /* 兜底样式,针对完全不支持渐变的极旧浏览器 */ background: -moz-linear-gradient(center top, #FFFFFF 0px, #DDDDDD 100%); /* Firefox 3.6-15 */ background: -webkit-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); /* Chrome 1-25、Safari 4-6 */ background: -o-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); /* Opera 11.1-12.1 */ background: -ms-linear-gradient(top, #FFFFFF 0%, #DDDDDD 100%); /* IE 10 */ background: linear-gradient(to bottom, #FFFFFF 0%, #DDDDDD 100%); /* 标准语法,适配所有现代浏览器 */ background-repeat: repeat; background-position: 0 0; background-color: transparent;
额外说明:
- 开头的纯色
#DDDDDD是兜底方案,确保在完全不支持渐变的古董浏览器里也能显示相近的背景效果 - 不同前缀对应不同浏览器的旧版本,覆盖了曾经的主流浏览器兼容场景
- 标准语法
linear-gradient(to bottom, ...)和你原代码的center top方向完全一致,都是从顶部到底部的垂直渐变 - 把原代码里的复合属性拆分成单独属性,让代码结构更清晰,视觉效果和原代码完全一致
内容的提问来源于stack exchange,提问作者James White
相关产品推荐
相关产品推荐

