css函数之重复的径向渐变

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>

css函数之重复的径向渐变相关推荐

css 渐变椭圆,CSS图形基础：利用径向渐变绘制图形
1．径向渐变 radial-gradient() 函数用于创建一个径向渐变的"图像",其一般调用格式为: background-image: radial-gradient(sha ...
CSS【进阶】线性径向渐变background-image:linear-gradient()；background-image:radial-gradient()；
目录 1. 线性渐变: 1.1 从左到右渐变 1.2 从下到上渐变 1.3 从左下角到右上角渐变 1.4 特定的角度渐变 1.5 多个颜色节点:[这个配色优点丑丑的] 1.6 使用rgba透明度: 1 ...
css3五花八门渐变之径向渐变【完美光晕效果】
CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gra ...
CSS3_线性渐变_径向渐变----背景
渐变的本质: 绘制一张背景图片,所以使用 background 或者 background-image background 的诸多属性,渐变都是可以使用的(repeat,position) 百分比: ...
CSS3中的径向渐变知识点整理
渐变概念渐变 (gradients) 可以让我们在两个或多个颜色之间进行平稳的过渡. 曾经我们只有使用图像来实现颜色的过渡效果,但渐变的出现,可以让用户使用时减少下载的时间和宽带的使用 . ...
CSS radial-gradient() 函数 - 用径向渐变创建图像
radial-gradient() radial-gradient() 函数用径向渐变创建 "图像".径向渐变由中心点定义,为了创建径向渐变你必须设置两个终止色. 定义与用法 ra ...
CSS小技巧---线性渐变linear-gradient/径向渐变radial-gradient
文章目录前言普通渐变条纹条纹重复虚线斜向条纹三角形进度条动画 progress 网格圆点阵列波点图案前言本文主要介绍linear-gradient的使用方法,既有普通的用法,也 ...
CSS-0813(重复性)线性/径向渐变-过渡属性transition-变形属性transform变形位移旋转缩放倾斜视域函数perspective变形原点三角形居中方法
title: "CSS 0813-渐变&过渡&变形" date: 2022-08-15T09:43:28+08:00 文章目录 title: "CSS 0 ...
CSS线性渐变和径向渐变详解
第九章:渐变色 1.线性渐变 1.1.什么是线性渐变 1.2线性渐变的写法 2.径向渐变 2.1什么是径向渐变 2.2径向渐变的写法总结 1.线性渐变 1.1.什么是线性渐变线性渐变,顾名思义就是 ...
html设置径向渐变色,【前端Talkking】CSS系列-css3之径向渐变初探
1 径向渐变radial-gradient 这是关于渐变的第二篇文章径向渐变,第一篇文章是线性渐变,有兴趣的可以看这里 1.1 基本语法线性渐变是沿着一条直线渐变,而径向渐变则是沿着椭圆或者圆进行渐 ...

css函数之重复的径向渐变

repeating-radial-gradient()函数

css函数之重复的径向渐变相关推荐

最新文章

热门文章