linear-gradient用法
时间: 2023-10-08 18:11:55 浏览: 112
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
linear-gradient是CSS中用于创建渐变背景色的函数,其基本语法为:
```
background: linear-gradient(direction, color-stop1, color-stop2, ...);
```
其中,direction表示渐变的方向,可以是角度值、关键词(如to top、to bottom等)或者是关键词+角度值的组合;color-stop表示颜色停止点,可以是颜色值、关键词(如transparent)或者是颜色值+位置值(0-100%)的组合。
例如,以下代码将创建一个从上到下的红色线性渐变背景:
```
background: linear-gradient(to bottom, #ff0000, #ffffff);
```
以下代码将创建一个从左上到右下的蓝色线性渐变背景:
```
background: linear-gradient(45deg, #0000ff, #ffffff);
```
需要注意的是,linear-gradient函数需要在现代浏览器中使用,而旧版浏览器可能不支持该属性。
阅读全文