当前位置：首页 > article >正文

【前段基础入门之】=＞CSS3新增渐变颜色属性

article 2025/3/5 0:14:09

在这里插入图片描述
导语：

CSS3 新增了，渐变色 的解决方案，这使得我们可以绘制出更加生动的炫酷的的配色效果

`线性`渐变

多个颜色之间的渐变，默认从上到下渐变

background-image: linear-gradient(red,yellow,green);   /*默认从上到下渐变*/

默认从上到下渐变

可以使用`关键词`设置线性`渐变的方向`

to，代表往哪去，联合right就代表，规定渐变色往右边渐变过度，top 同理

    background-image: linear-gradient(to right, red, yellow, green); /*从左往右渐变*/
    
    background-image: linear-gradient(to top,red,yellow,green); /*从下到上渐变*/

从左往右渐变

从下到上渐变

使用`角度值`设置线性渐变的方向

    background-image: linear-gradient(36deg, red, yellow, green);  /*渐变角度值偏移36deg*/

通过角度值设置线性渐变的方向

调整`开始渐变`的位置

background-image: linear-gradient(red 50px, yellow 100px, green 150px);

为每个配色设置，渐变开始的位置

`径向`渐变

多个颜色之间的渐变， 默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）

background-image: radial-gradient(red,yellow,green);

默认从圆心四散

使用`关键词`调整渐变圆的`圆心位置`

background-image: radial-gradient(at right top, red, yellow, green);  /*at 表示圆心在... ; right top 表示右上角， */

设置渐变圆心在右上角

使用`像素值`调整渐变圆的`圆心位置`

background-image: radial-gradient(at 100px 50px,red,yellow,green);  /*100 表示，以左上角为奇点，距离 x 坐标距离，50 为 y 轴坐标距离*/

调整渐变形状为`正圆`

background-image: radial-gradient(circle, red, yellow, green);

使用 circle 关键字可设置渐变为正圆

调整形状的`半径`

在这里插入图片描述

调整`开始`渐变的`位置`

在这里插入图片描述

锥形渐变

在这里插入图片描述

background-image: conic-gradient(red, pink, #125cbe, #17c356, #7612be, #5aacd0, #4b8eaa, #be7112, #c01366);

`循环重复`渐变

无论线性渐变，还是径向渐变，在没有发生渐变的纯色位置，继续进行渐变，就为循环重复渐变

使用 repeating-linear-gradient 进行重复线性渐变，具体参数同 linear-gradient
使用 repeating-radial-gradient 进行重复径向渐变，具体参数同 radial-gradient

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————

查看全文

http://www.kler.cn/a/104427.html