首页 > html+css >正文

css背景之径向渐变radial-gradient

发布时间：2024-08-07 16:34 作者：一友画

css背景之径向渐变radial-gradient

a）语法：background: radial-gradient(颜色,颜色)

案例：
```
<style>
div{
   width: 100px;
   height: 100px;
   background: radial-gradient(red,green);
}
</style>
<div></div>
```
效果：
b）语法：background: radial-gradient(颜色百分比,颜色百分比)

案例：
```
<style>
div{
   width: 100px;
   height: 100px;
   background: radial-gradient(red 30%,green 80%);
}
</style>
<div></div>
```
效果：

案例2：
```
<style>
div{
   width: 100px;
   height: 100px;
   background: radial-gradient(red 10%,orange 20%,yellow 30%,green 40%,cyan 50%,blue 60%,purple 70%);
}
</style>
<div></div>
```
效果2：
c）语法：background: radial-gradient(circle/ellipse,颜色,颜色)

案例：（圆形）
```
<style>
div{
   width: 100px;
   height: 100px;
   background: radial-gradient(circle,red 20%,green 50%);
}
</style>
<div></div>
```
效果：（圆形）

案例2：（椭圆）
```
<style>
div{
   width: 100px;
   height: 100px;
   background: radial-gradient(ellipse,red 20%,green 50%);
}
</style>
<div></div>
```
效果2：（椭圆）

以上内容，在整理时难免有疏漏错误之处，如有发现，可以通过顶部的“联系站长”提出反馈，感谢您的支持！