css函数之重复的径向渐变

慕.晨风

已于 2023-04-10 21:07:44 修改

阅读量843

点赞数 1

分类专栏：前端设计文章标签： html

于 2022-04-13 22:47:51 首次发布

本文链接：https://blog.csdn.net/qq_51943014/article/details/124159567

版权

前端设计专栏收录该内容

5 篇文章 0 订阅

订阅专栏

repeating-radial-gradient()函数

语法：

background-image:repeating-radial-gradient(shape size at position, start-color,...,last-color);

shape : 定义渐变的形状分为

ellipse	指定椭圆形的径向渐变
circle	指定圆形的径向渐变

size ：指边缘轮廓的位置，其值可分为

closest-corner	指定径向渐变的半径长度为从圆心到距离圆心最近角
farthest-corner	(默认)指定径向渐变的半径长度为从圆心到距离圆心最远的角
closest-sest	指定径向渐变的半径长度为从圆心到距离圆心最近的边
farthest-side	指定径向渐变的半径长度为从圆心到距离圆心最远的边

position ：指圆心位置，默认为 center

start-color,...last-color : 指定渐变的起止颜色，可以使用长度或者百分比定起止色的位置，不允许负值

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .box1{
        width:600px; 
        height:550px; 
        background-image:repeating-radial-gradient(circle at 50% 50%,#333,#000 1%);
        margin:50px auto; 
        padding:40px;  
        border-radius:50%;
        padding-top:50px;
        border:10px solid #ccc;
    }
    </style>
</head>
<body>
<div  class="box1"></div>
</body>
</html>

慕.晨风

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css函数之重复的径向渐变

repeating-radial-gradient()函数语法：background-image:repeating-radial-gradient(shape size at position, start-color,...,last-color);shape : 定义渐变的形状分为ellipse 指定椭圆形的径向渐变 circle 指定圆形的径向渐变 size ：指边缘轮廓的位置，其值可分为closest-corner 指定径向渐变的半径长度为从圆心到
复制链接

扫一扫