linear-gradient && radical-gradient详解

桃花扇J

已于 2022-01-28 12:14:09 修改

阅读量1.2k

点赞数 2

分类专栏： CSS3 文章标签： css3

于 2020-03-26 20:33:53 首次发布

本文链接：https://blog.csdn.net/weixin_44584442/article/details/105114582

版权

CSS3 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

线性渐变与径向渐变，挺好玩的两个属性值，不过挺复杂的，希望能捋清楚吧

1.linear-gradient

（1）基础用法

传两部分参数方向 + 颜色（颜色可填两个以上的值），方向可为to right / top / left / bottom（默认方向）/ top right / top left / bottom right / bottom left 以及角度等

【例1】默认值为botto

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-image: linear-gradient(#ff7, #7f7, #77f );
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

【结果】

【例2】方向top right

div {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to top right, #ff7, #7f7, #77f );
}

【例3】方向值为角度

div {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(90deg, #ff7, #7f7, #77f );
}

【结果】

（2）进阶用法

确定颜色的起止位置，在每个颜色后面添加像素参数

【例】

div {
    width: 300px;
    height: 100px;
    background-image: linear-gradient(90deg, #ff7 50px, #7f7 150px, #77f 200px);
}

【结果】在0-50px之间颜色值为 #ff7 ，50px开始过渡直至150px为 #7f7，150px过渡至200px，200px-300px颜色值为 #77f

2.radical-gradient

径向渐变

语法规则：radial-gradient(形状放射半径 at 圆心位置 , 颜色)

形状：circle / ellipse

放射半径：closest-corner / closest-side / farthest-corner / farthest-side

位置：（一个参数/两个参数）像素值 / 百分比 / left,right,top,bottom,center

颜色：颜色后也可添加起止位置，长度是相对于圆心计算，即放射点

【注】可以不填，但是属性值位置一定不能乱！！！

【例1】只填颜色

div {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(#fff 0px, #ff7 30px, #000 90px);
}

【结果】

【例2】添加位置

div {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(at 0px 0px, #fff, #ff7, #000);
}

【结果】

【例3】添加形状

ellipse

div {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(ellipse at 100px 50px, #fff, #ff7, #000);
}

【结果】

circle

div {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle at 100px 50px, #fff, #ff7, #000);
}

【结果】

【例4】添加放射半径

closest-corner

div {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(ellipse closest-corner  at 80px 50px, #fff, #ff7, #000);
}

【结果】

closest-side

div {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(ellipse closest-side  at 80px 50px, #fff, #ff7, #000);
}

【结果】

farthest-corner

div {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(ellipse farthest-corner  at 80px 50px, #fff, #ff7, #000);
}

【结果】

farthest-side

div {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(ellipse farthest-side  at 80px 50px, #fff, #ff7, #000);
}

【结果】

桃花扇J

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
linear-gradient && radical-gradient详解

线性渐变与径向渐变，挺好玩的两个属性值，不过挺复杂的，希望能捋清楚吧1.linear-gradient（1）基础用法传两部分参数方向 + 颜色（颜色可填两个以上的值），方向可为to right / top / left / bottom（默认方向）/ top right / top left / bottom right / bottom left 以及角度等【例1】默认值为bo...
复制链接

扫一扫

专栏目录