CSS3属性linear-gradient()渐变色

最新推荐文章于 2024-04-08 11:09:50 发布

原创最新推荐文章于 2024-04-08 11:09:50 发布 · 534 阅读

2 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用CSS的linear-gradient属性创建多种方向的渐变背景效果，包括默认从左到右、从右到左、以及指定角度的渐变。

语法： linear-gradient(xdeg,color1,color2,color3…)
默认的x为180
1.

.box1 {
            width: 200px;
            height: 200px;
            background-image: linear-gradient(red, yellow, green, blue);
        }

结果如下：
在这里插入图片描述
2.

.box2 {
            width: 200px;
            height: 200px;
            background-image: linear-gradient(to right, red, yellow, green, blue);
        }

前面加个 to right 表示按red, yellow, green, blue从左到右渐变

结果如下：
在这里插入图片描述
3.

.box3 {
            width: 200px;
            height: 200px;
            background-image: linear-gradient(to left, red, yellow, green, blue);
        }

前面加个 to left 表示按red, yellow, green, blue从右到左渐变

结果如下：
在这里插入图片描述
4.

.box4 {
            width: 200px;
            height: 200px;
            background-image: linear-gradient(45deg, red, yellow, green, blue);/*默认是180deg*/
        }

在0deg的基础上顺时针旋转45度角
结果如下：
在这里插入图片描述