[转载]径向渐变 radial-gradient
作者：互联网
radial-gradient() 函数用于创建一个径向渐变的“图像”，其一般调用格式为：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
1、其中，参数shape定义渐变的形状，
- 默认值为ellipse，为椭圆形的径向渐变，
- 值circle，为圆形的径向渐变。
2、参数size 定义渐变的大小，可能值有：
- farthest-corner（默认）：指定径向渐变的半径长度为从圆心到离圆心最远的角；
- closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
- closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
- farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
3、参数position 定义渐变的位置。可能值有：
- center（默认）：设置中间为径向渐变圆心的纵坐标值。
- top：设置顶部为径向渐变圆心的纵坐标值。
- bottom：设置底部为径向渐变圆心的纵坐标值。
4、参数start-color，…，last-color用于指定渐变的起止颜色，可以使用长度值或百分比来指定起 && 止色位置，但不允许负值。
repeating-radial-gradient() 函数用于创建重复的径向渐变“图像”，其一般调用格式为：
background-image: repeating-radial-gradient(shape size at position,start-color, ..., last-color);
径向渐变从中心点开始以椭圆的形式向外渐变
颜色从红色开始，以椭圆形状渐变转为黄色。
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image:radial-gradient(red , yellow);
}
</style>
如果css的background-image属性定义为：background-image:radial-gradient(circle, red , yellow);
渐变是以圆形的方式进行，颜色同样从红色开始，渐变转为黄色。
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image:radial-gradient(circle, red , yellow);
}
</style>
如果css的background-image属性定义为：background-image:radial-gradient(closest-side , red , yellow);
此时由于指定径向渐变的半径长度为从圆心到离圆心最近的边（上下两条边），黄色面积明显增大。
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image:radial-gradient(closest-side , red , yellow);
}
</style>
大家可以自己试试 将closest-side 依次修改为farthest-corner（默认）、closest-corner和farthest-side后，图形的变化。
如果css的background-image属性定义为：background-image:radial-gradient(closest-side at 60% 55%, red , yellow);
渐变中心位置往右下偏了，效果如图：
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image:radial-gradient(closest-side at 60% 55%, red , yellow);
}
</style>
径向渐变可以指定多个颜色
如果css的background-image属性定义为：background-image:radial-gradient(red,orange,yellow,green,indigo,blue,violet);
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image:radial-gradient(red,orange,yellow,green,indigo,blue,violet);
}
</style>
径向渐变中指定的颜色可以使用透明度
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image:radial-gradient( rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
径向渐变中指定的颜色还可以定义停止位置
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image:radial-gradient(red 5%, green 15%, blue 60%);
}
</style>
界限清楚，取消了渐变效果
如果修改background-image属性定义为：background-image:radial-gradient(red 50%, yellow 50%);红黄两种颜色界限清楚，取消了渐变效果
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image:radial-gradient(red 50%, yellow 50%);
}
</style>
如果修改background-image属性定义为：background-image:radial-gradient(red 33%, yellow 33%, yellow 66%,blue 66%);
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image:radial-gradient(red 33%, yellow 33%, yellow 66%,blue 66%);
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: repeating-radial-gradient(circle, red 0, red 10px, yellow 10px, yellow 20px, blue 20px, blue 30px) ;
}
</style>
部分界限清楚，部分有渐变效果
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image:radial-gradient(red 33%, yellow 66%,blue 66%);
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid;
background-image: repeating-radial-gradient(red, yellow 10%, blue 15%);
}
</style>
利用径向渐变绘制图形
（1）同心圆
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 300px;
height: 300px;
border: 1px solid;
border-radius: 50%;
background-image: repeating-radial-gradient(red 0px, red 10px, #fff 10px, #fff 20px);
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid;
border-radius: 50%;
background-image: radial-gradient(60px at center center ,#fff 50% ,#000 50%);
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid;
border-radius: 50%;
background-image: radial-gradient(60px at center center ,#000 50%,#fff 50%);
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 300px;
height: 300px;
border-radius: 50%;
background: repeating-radial-gradient(#f00, #f00 4px, #ff0 5px, #f00 6px);
background-size: 100% 100%;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 300px;
height: 300px;
border-radius: 50%;
background: repeating-radial-gradient(#f00, #f00 4px, #ff0 5px, #f00 6px);
background-size: 50% 100%;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 300px;
height: 300px;
border-radius: 50%;
background: repeating-radial-gradient(#f00, #f00 4px, #ff0 5px, #f00 6px);
background-size: 100% 50%;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 300px;
height: 300px;
border-radius: 50%;
background: repeating-radial-gradient(#f00, #f00 4px, #ff0 5px, #f00 6px);
background-size: 50% 50%;
}
</style>
<div class="shape"></div>
<style>
.shape{
position: absolute;
width: 262px;
height: 262px;
border-radius: 50%;
background: repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px,#2a2928 6px);
}
.shape:after
{
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -35px;
border: solid 1px #d9a388;
width: 68px;
height: 68px;
border-radius: 50%;
box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
background: #b5ac9a;
}
</style>
（2）圆与椭圆
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid;
background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red);
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 50%;
border: 1px solid;
background: radial-gradient(100px 50px ellipse, transparent 80px, yellow 81px, red);
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red 49px, transparent 50px),
radial-gradient(30px circle, red, red 29px, transparent 30px);
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid;
background:radial-gradient(10px 18px ellipse, transparent 8px, yellow 9px, red 11px, transparent 13px),
radial-gradient(6px circle, red, red 6px, transparent 7px);
background-size: 50px 50px;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid;
background:radial-gradient(10px 50px ellipse, transparent 8px, yellow 9px, red 11px, transparent 13px),
radial-gradient(6px circle, red, red 6px, transparent 7px);
background-size: 50px 50px;
}
</style>
（3）眼睛
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width: 224px;
height: 128px;
background-color: #333;
border-radius: 50% 50% 45% 42%;
background-image:radial-gradient(circle at 128px 64px, white 10px, transparent 10px),
radial-gradient(circle at 112px 64px, #333 22px, transparent 22px),
radial-gradient(circle at 112px 64px, white 32px, transparent 32px);
}
</style>
（4）圆弧切角
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width:200px;
height: 200px;
background:#f0f;
background:radial-gradient(circle at top left,transparent 25px,#f0f 0) top left,
radial-gradient(circle at top right,transparent 25px,#f0f 0) top right,
radial-gradient(circle at bottom right,transparent 25px,#f0f 0) bottom right,
radial-gradient(circle at bottom left,transparent 25px,#f0f 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
</style>
（5）背景图案
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width: 400px;
height: 400px;
background: radial-gradient(white 15%, transparent 16%),
radial-gradient(white 15%, transparent 16%), #d8d8d8;
background-position: 0 0, 50px 50px;
background-size: 100px 100px;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background-image:radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),
radial-gradient(rgba(255,255,255,0.4) 15%,transparent 16%),
radial-gradient(black 15%,transparent 16%),
radial-gradient(black 15%,transparent 16%);
background-position: 0 0px,10px 10px,0 1px,10px 11px;
background-size: 20px 20px;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#ff0;
background-image:radial-gradient(closest-side, rgba(255,0,0,0) 98%,rgba(255,0,0,1) 99%);
background-size: 80px 80px;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#ff0;
background-image:radial-gradient(closest-side, rgba(255,0,0,0) 98%,rgba(255,0,0,1) 99%),
radial-gradient(closest-side,rgba(255,0,0,0) 98%,rgba(255,0,0,1) 99%);
background-position: 0 0px,40px 40px;
background-size: 80px 80px;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#ff0;
background-image:radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%);
background-size: 100px 100px;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#ff0;
background-image:radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%),
radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%);
background-position: 0 0px, 50px 50px;
background-size: 100px 100px;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#ff0;
background-image:radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%),
radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%,#FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
background-position: 0 0px, 50px 50px;
background-size: 100px 100px;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#fff;
background-image: radial-gradient(SeaGreen 9px, transparent 10px),
repeating-radial-gradient(SeaGreen 0px, SeaGreen 4px, transparent 5px, transparent 20px, SeaGreen 21px, SeaGreen 25px, transparent 26px, transparent 50px);
background-position: 0 0;
background-size: 30px 30px, 90px 90px;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width: 400px;
height: 300px;
border: 1px solid rgba(50, 50, 50, 0.9);
background:#ff0;
background-image: radial-gradient(closest-side circle at 60% 43%, #ff0 26%,rgba(255, 255, 0, 0) 27%),
radial-gradient(closest-side circle at 40% 43%, #ff0 26%,rgba(255, 255, 0, 0) 27%),
radial-gradient(closest-side circle at 40% 22%, #f00 45%,rgba(255, 0, 0, 0) 46%),
radial-gradient(closest-side circle at 60% 22%, #f00 45%, rgba(255, 0, 0, 0) 46%),
radial-gradient(closest-side circle at 50% 35%, #f00 30%, rgba(255, 0, 0, 0) 31%),
radial-gradient(closest-side circle at 60% 43%, #ff0 26%,rgba(255, 255, 0, 0) 27%),
radial-gradient(closest-side circle at 40% 43%, #ff0 26%,rgba(255, 255, 0, 0) 27%),
radial-gradient(closest-side circle at 40% 22%, #f00 45%, rgba(255, 0, 0, 0) 46%),
radial-gradient(closest-side circle at 60% 22%, #f00 45%, rgba(255, 0, 0, 0) 46%),
radial-gradient(closest-side circle at 50% 35%, #f00 30%, rgba(255, 0, 0, 0) 31%);
background-position: 0 0%, 0 0%, 0 0%, 0 0%, 0 0%,50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px;
background-size: 100px 100px;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width: 400px;
height: 300px;
border: 1px solid;
background:radial-gradient(circle at 50% 59%, #fff 3%, #000 4%, #000 11%,rgba(0,0,0,0) 12%, rgba(0,0,0,0)) 60px 0,
radial-gradient(circle at 50% 41%, #000 3%, #fff 4%, #fff 11%, rgba(255,255,255,0) 12%, rgba(255,255,255,0)) 60px 0,
radial-gradient(circle at 50% 59%, #fff 3%, #000 4%, #000 11%, rgba(0,0,0,0) 12%, rgba(0,0,0,0)) 0 60px,
radial-gradient(circle at 50% 41%, #000 3%, #fff 4%, #fff 11%, rgba(255,255,255,0) 12%, rgba(255,255,255,0)) 0 60px,
radial-gradient(circle at 100% 50%, #fff 16%, rgba(255,255,255,0) 17%),
radial-gradient(circle at 0% 50%, #000 16%, rgba(0,0,0,0) 17%),
radial-gradient(circle at 100% 50%, #fff 16%,rgba(255,255,255,0) 17%) 60px 60px,
radial-gradient(circle at 0% 50%, #000 16%,rgba(0,0,0,0) 17%) 60px 60px;
background-color:#f0f;
background-size:120px 120px;
}
</style>
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width: 400px;
height: 300px;
border: 1px solid;
background:radial-gradient(circle farthest-side at 0% 50%, #fb1 23.5%,rgba(240,166,17,0) 0) 21px 30px,
radial-gradient(circle farthest-side at 0% 50%, #B71 24%,rgba(240,166,17,0) 0) 19px 30px,
linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0) 0 0,
linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%, rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%, #B71 0,#B71 76%,#fb1 0) 0 0,
linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%, rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%, #B71 0,#B71 76%,#fb1 0) 0 0,
linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%) 0 0 #fb1;
background-size:40px 60px;
}
</style>
径向渐变在动画制作中的应用实例
（1）圆点的扩散。
<div class="shape"></div>
<style>
.shape{
margin: 50px auto;
width:400px;
height: 400px;
border: 1px solid;
background: radial-gradient(circle, #f00, #f00 6px, transparent 7px);
background-size: 200px 200px;
animation: anim 8s linear infinite alternate;
}
@keyframes anim{
0% { background-size:400px 400px; }
25% { background-size:200px 200px; }
50% { background-size:100px 100px; }
75% { background-size:50px 50px; }
100% { background-size:25px 25px; }
}
</style>
（2）Loading动画。
<div class="shape"></div>
<style>
.shape{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display: grid;
overflow: hidden;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape::before, .shape::after {
padding: 100px;
place-self: center;
grid-column: 1;
grid-row: 1;
--stops: #fff 15px, transparent 16px;
background: radial-gradient(circle at 16px, var(--stops)),
radial-gradient(circle at 50% 16px, var(--stops)),
radial-gradient(circle at calc(100% - 16px), var(--stops)),
radial-gradient(circle at 50% calc(100% - 16px), var(--stops));
animation: rotate 1s ease-in-out infinite;
content: "";
}
.shape::before {
animation-name: move;
}
@keyframes rotate {
33.33% { transform: rotate(0deg); }
66.67%, 100% { transform: rotate(90deg); }
}
@keyframes move {
33.33%, 66.67% { padding: 16px;}
}
</style>
（3）旋转的太极图
<div class="container">
<div class="shape"></div>
</div>
<style>
.container{
margin: 0 auto;
width: 450px;
height:450px;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.shape{
position: relative;
width: 400px;
height: 400px;
border-radius: 50%;
background-image: linear-gradient(90deg,#fff 50%,#000 50%);
animation:rotate 2s linear infinite;
}
.shape::before,.shape::after{
content: '';
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
left: 25%;
}
.shape::before {
background-image:radial-gradient(60px at center center ,#fff 50% ,#000 50%);
}
.shape::after {
bottom: 0px;
background-image:radial-gradient(60px at center center ,#000 50% ,#fff 50%);
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform:rotate(-360deg); }
}
</style>
转载自https://www.cnblogs.com/cs-whut/p/13575125.html
标签：rgba,gradient,50%,shape,background,radial,径向 来源： https://blog.csdn.net/qi__lu/article/details/120563810