欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

css径向渐变radial-gradient和css正则选择器

程序员文章站 2023-12-29 13:05:58
效果图：radial-gradient()函数创建了一个图片，其由原点辐射开的在俩个或者多个点颜色之前的渐变组成写法：background:radial-gradient(#ccc,#9198e5)background:radial-gradient(closest，#ccc,#9198e5，#ff3040)background:radial-gradient(circle at 100%,#ccc,#ccc 50%,#9198e5,75%,#ff3040 75%)

效果图：
css径向渐变radial-gradient和css正则选择器

radial-gradient()函数创建了一个图片，其由原点辐射开的在俩个或者多个点颜色之前的渐变组成
写法：
background:radial-gradient(#ccc,#9198e5)
background:radial-gradient(closest，#ccc,#9198e5，#ff3040)
background:radial-gradient(circle at 100%,#ccc,#ccc 50%,#9198e5,75%,#ff3040 75%)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    [attr^="val1"] {
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: radial-gradient(red, #9198e5);
    }
    [attr^="val2"] {
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
    }
    [attr^="val3"] {
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333333 75%);
    }
    [attr^="val4"] {
        float: left;
        width: 200px;
        height: 200px;
        margin: 20px;
        background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red);
    }
</style>

<body>
    <div attr="val1">

    </div>
    <div attr="val2">

    </div>
    <div attr="val3">

    </div>
    <div attr="val4">

    </div>
</body>

</html>

本文地址：https://blog.csdn.net/m0_47480813/article/details/112799077

相关标签： css html

上一篇：

下一篇：

推荐阅读