一、径向渐变

径向渐变（radial-gradient）：指从一个中心点开始沿着四周产生渐变效果。

语法：

background：radial-gradient（起始方向，颜色1，颜色2，…）;
background：-webkit-radial-gradient（left，red，blue）;（兼容性）
background：-webkit-radial-gradient（circle center，red，blue）;（方向）

设置形状：

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

示例：

<!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>div {width: 500px;height: 500px;border-radius: 50%;margin: 100px auto;background: -webkit-radial-gradient(circle, red, black);}</style>
</head>
<body><div></div>
</body>
</html>

图片如下：

二、重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变

例子：

div {
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* 标准的语法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

三、制作步骤

1.首先设置一个长宽都为500px的盒子

2.设置border-radius为盒子的一半让盒子变成一个圆

3.给盒子添加repeating-radial-gradient() 属性让年轮产生

四、详细代码

下面就是详细代码了，做法其实很简单，大家一看就懂。

<!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>div {width: 500px;height: 500px;border-radius: 50%;margin: 100px auto;background: repeating-radial-gradient(circle at center, black 0, black 7%, red 7%, red 14%, yellow 14%, yellow 21%, blue 21%, blue 28%, rgb(255, 0, 98) 28%, rgb(255, 0, 98) 35%, rgb(195, 0, 0) 35%, rgb(195, 0, 0) 42%, green 42%, green 49%, yellow 49%, yellow 56%, blue 56%, blue 64%);}</style>
</head><body><div></div>
</body></html>

示例如下：

是不是炫酷到闪瞎你的眼`~~~~

总结

这就是本次年轮做法的分享了，以后还会继续分享一些有意思的小案例，喜欢的可以点赞收藏哦。

CSS渐变-圆形年轮相关推荐

CSS 渐变-阴影-滤镜【值得收藏】
文章目录(PS:觉得不错请点赞收藏支持一下) CSS 渐变一.初识 CSS 渐变二.CSS 线性渐变 2.1 介绍线性渐变 2.2 线性渐变应用 2.2.1 线性渐变 - 从上到下(默认) 2.2 ...
CSS 渐变与文本格式化
CSS 渐变(Gradients) 渐变效果 CSS 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变( ...
Gradify - 提取图片颜色，创建响应式的 CSS渐变
被请求的HTTP对象之间的延迟会有一个时间段,这个期间网页看起来不完整.Gradify 可以分析出图像中4个最常见的颜色,创建一个梯度(或纯色)作为图片占位符.Gradify 可以在在任何图像发现最突 ...
android view 渐变动画,Android自定义view渐变圆形动画
本文实例为大家分享了Android自定义view渐变圆形动画的具体代码,供大家参考,具体内容如下直接上效果图自定义属性 attrs.xml文件创建一个类 ProgressRing继承自 view ...
html设置按钮样式变为椭圆,css border-radius圆形变为椭圆形，位置：绝对
我正在围绕字体真棒图标创建一个圆圈.我的问题是,当我添加position: absolute圆成为一个椭圆.css border-radius圆形变为椭圆形,位置:绝对同样的情况,如果我是设置dis ...
css画饼状图圆形,CSS样式圆形饼图百分比
更新记录 1.0.0(2021-07-27) 简单的CSS样式圆形饼图百分比平台兼容性 Vue App 微信小程序支付宝小程序百度小程序字节小程序 QQ小程序快应用 vue2 3.1.0 a ...
android刷新时的圆形动画_Android自定义view渐变圆形动画
本文实例为大家分享了Android自定义view渐变圆形动画的具体代码,供大家参考,具体内容如下直接上效果图自定义属性 attrs.xml文件创建一个类 ProgressRing继承自 view ...
css实现波浪球效果图,用css实现圆形波浪效果图
在移动端经常看到一些圆形波浪图来显示金额,刚开始我认为这种效果只能用canvas写的,后来发现用css也可以. 原理:我们都知道让块元素的border-radius:50%会变成圆形,如果少于50%呢 ...
html5 css 渐变背景,css渐变，css渐变色背景
#grad{/*Safari5.1-6.0*/ background:-o-linear-gradient(red,blue);/*Opera11.1-12.0*/ background:-moz-l ...

CSS渐变-圆形年轮

一、径向渐变

二、重复的径向渐变

三、制作步骤

四、详细代码

总结

CSS渐变-圆形年轮相关推荐

最新文章

热门文章