线性渐变liner-gradient()

最新推荐文章于 2024-05-09 20:59:01 发布

8笔

最新推荐文章于 2024-05-09 20:59:01 发布

阅读量659

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_43899694/article/details/103926151

版权

本文详细介绍了CSS中的linear-gradient()函数，解释了如何使用它来创建两种或多种颜色的线性渐变效果。文章涵盖了基本语法，包括方向、颜色、位置和透明度的设置，并提供了跨浏览器兼容性的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

liner-gradient()

用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型，是一种特别的<image>数据类型。

提示：由于<gradient>数据类型系<image>的子数据类型，<gradien\t>只能被用于<image>可以使用的地方。
因此，linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型的属性中。

用法：

background: liner-gradient(color1, 中点位置-可选, color2)
background: liner-gradient(方向-可选, 颜色-多选 颜色位置-可选, 透明度-可选)

跨浏览器渐变：

.grad { 
  background-color: #F07575; /* 不支持渐变的浏览器回退方案 */
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Firefox (3.6 to 15) */
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持旧 Opera (11.1 to 12.0) */ 
  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法; 需要最新版本 */
}