渐变的用法及案例实现

NehzUs

已于 2022-05-08 10:33:44 修改

阅读量293

点赞数

文章标签： css

于 2022-04-27 21:19:10 首次发布

本文链接：https://blog.csdn.net/m0_62903673/article/details/124460836

版权

渐变，大致上分为线性渐变、径向渐变、重复渐变。

1. 线性渐变。
1）语法。 background-image：linear-gradient（方向(deg），颜色简便的百分比）其中，百分比的作用是在线性的方向上分段，该节点达到颜色值，其余渐变。

代码实现

<html>

<style>
    .p{
        width: 500px;
        height: 500px;
        background-image: -webkit-linear-gradient(left top, red, blue, green);
}
</style>


<body>
<div class="p"></div>
</body>

</html>

呈现结果

2）方向。分上下左右和角度，默认值是top、to bottom、180deg如果添加方向，则必须知使用浏览器的内核识别标识，如果是IE浏览器则需要加上-moz-标识。若是safari & chorme内核的浏览器，则需加上-webkit-标识。像上述代码中就加入了-webkit-标识。

2. 径向渐变

1）语法。 radial-gradient（中心点，形状，颜色，渐变点的百分比&#

最低0.47元/天解锁文章

NehzUs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渐变的用法及案例实现

渐变，大致上分为线性渐变、径向渐变、重复渐变。1.线性渐变。 1）语法。background-image：linear-gradient（方向(deg），颜色简便的百分比）其中，百分比的作用是在线性的方向上分段，该节点达到颜色值，其余渐变。 2）方向。分上下左右和角度，默认值是top、to bottom、180deg如果添加方向，则必须知使用浏览器的内核识别标识，如果是IE浏览器则需要加上-moz-标识。若是safari & chorme内核的浏览器，则需加上...
复制链接

扫一扫