CSS3 渐变属性【详细】

最新推荐文章于 2025-04-09 10:02:51 发布

Vvc_b

最新推荐文章于 2025-04-09 10:02:51 发布

阅读量2.3k

点赞数 22

分类专栏： CSS 文章标签： css3 前端 css

本文链接：https://blog.youkuaiyun.com/m0_74897683/article/details/143114908

版权

CSS3中渐变属性设置

CSS3 提供了两种类型的渐变：线性渐变（linear-gradient）和径向渐变（radial-gradient）。这些渐变可以用来创建丰富的视觉效果，如背景、边框等。以下是这两种渐变的详细设置方法：

一、线性渐变

（linear-gradient）

线性渐变是沿着直线方向的颜色过渡。其基本语法如下：

background-image: linear-gradient(方向, 颜色1 [偏移1], 颜色2 [偏移2], ...);
方向：可以是角度（如  45deg ）或者预定义的关键词（如  to bottom，to left bottom ）。

颜色1：渐变的起始颜色。
偏移1：起始颜色的结束位置（可选）。
颜色2：渐变的结束颜色。
偏移2：结束颜色的开始位置（可选）。

示例1：

 div:first-child{
   
        background: linear-gradient(#ff00ff,#00ffff);
    }

示例2：

/* 垂直和水平渐变 */
div:nth-child(2){
   
        /* background: linear-gradient(to right,#ff00ff,#00ffff,pink); 
        background: linear-gradient(to left,#ff00ff,#00ffff,pink);
        background: linear-gradient(to top,#ff00ff,#00ffff,pink);
        background: linear-gradient(to bottom,#ff00ff,#00ffff,pink);
        background: linear-gradient(to right top,#ff00ff,#00ffff,pink);
        background: linear-gradient(to right b