CSS线性渐变（linear-gradient）浏览器兼容时角度的问题

最新推荐文章于 2024-08-22 09:01:06 发布

F_san

最新推荐文章于 2024-08-22 09:01:06 发布

阅读量1k

点赞数

分类专栏： CSS小随笔文章标签： css3 chrome html css

本文链接：https://blog.csdn.net/F_san/article/details/108144631

版权

在创建CSS线性渐变时遇到浏览器兼容性问题，尤其是在Chrome下发现即使加上-webkit-前缀，渐变角度并未按预期显示。通过尝试删除角度设置，发现默认角度可能为180deg。解决方法是使用0deg，得到理想的渐变效果。采用渐进增强写法后，问题得到解决。了解到旧标准中，0deg对应从左到右，90deg对应从下到上，转换公式为90 - x = y，x为标准角度，y为非标准角度。开发者需要注意这些细节以确保跨浏览器兼容性。

摘要由CSDN通过智能技术生成

练习CSS写美团移动端页面时，header部分为渐变色。

background: linear-gradient(90deg, #ffd265, #ffbf2e);

在这里插入图片描述

但是加入浏览器前缀后，并没有按照理想的角度渐变。

	 background: linear-gradient(90deg, #ffd265, #ffbf2e);
     background: -o-linear-gradient(90deg, #ffd265, #ffbf2e);
     background: -ms-linear-gradient(90deg, #ffd265, #ffbf2e);