18镜像渐变——HTML

最新推荐文章于 2021-07-20 10:55:51 发布

StudiousTiger

最新推荐文章于 2021-07-20 10:55:51 发布

阅读量397

点赞数

文章标签： css css3 html5 html

本文链接：https://blog.csdn.net/m0_45067620/article/details/107168835

版权

Tiger の HTML&CSS 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            /* 
             background-image: radial-gradient(red,yellow); 径向渐变

             默认情况下，径向渐变圆心的形状根据元素的形状来计算的
                正方形——>圆形
                长方形——>椭圆形
            手动指定径向简便的大小
                background-image: radial-gradient(100px 100px,red,yellow);
                径向区域的直径为100px
                background-image: radial-gradient(大小 [at 位置], 颜色[位置], 颜色[位置], 颜色[位置],……);
                    大小：
                        circle  园
                        ellipse 椭圆
            语法：

            */
            /* background-image: radial-gradient(red,yellow); */
            /* background-image: radial-gradient(100px 100px,red,yellow); */
            /* background-image: radial-gradient(100px 100px at 10px 10px ,red,yellow); */
            /* background-image: repeating-radial-gradient(1px 1px,red,yellow); */
            background-image: repeating-radial-gradient(circle at 10px 10px ,red,yellow 1%);
            
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>