首页 > html+css >正文

css背景之线性渐变linear-gradient

发布时间：2024-08-07 12:32 作者：一友画

css背景之线性渐变linear-gradient

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

案例：（从上到下）
```
<style>
div{
   width: 100px;
   height: 100px;
   background: linear-gradient(red,green);
}
</style>
<div></div>
```
效果：（从上到下）
b）语法：background: linear-gradient(to 方向,颜色,颜色)

案例：（从左到右）
```
<style>
div{
   width: 100px;
   height: 100px;
   background: linear-gradient(to right,red,green);
}
</style>
<div></div>
```
效果：（从左到右）

案例2：（从左上角到右下角）
```
<style>
div{
   width: 100px;
   height: 100px;
   background: linear-gradient(to right bottom,red,green);
}
</style>
<div></div>
```
效果2：（从左上角到右下角）
c）语法：background: linear-gradient(角度,颜色百分比,颜色百分比)

案例：
```
<style>
div{
   width: 100px;
   height: 100px;
   background: linear-gradient(135deg,red 20%,green 50%);
}
</style>
<div></div>
```
效果：
d）语法：background: linear-gradient(颜色,颜色,...)

案例：（彩虹）
```
<style>
div{
   width: 100px;
   height: 100px;
   background: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple);
}
</style>
<div></div>
```
效果：（彩虹）

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