线性渐变
- 盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景。
/* 渐变方向 开始颜色 结束颜色 */
background-image: linear-gradient(to right, blue, red);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
div {
width: 200px;
height: 200px;
margin: 10px;
/* 渐变方向 开始颜色 结束颜色 */
background-image: linear-gradient(to top, red, blue);
}
</style>
</head>
<body>
<!-- 背景渐变 -->
<div class="div1"></div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/5e8fa157aecac8f39e2edd64068c8e00.png)
/* deg表示度数 */
background-image: linear-gradient(45deg, blue, red);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
div {
width: 200px;
height: 200px;
margin: 10px;
/* deg表示度数 */
background-image: linear-gradient(90deg, red, blue);
}
</style>
</head>
<body>
<!-- 背景渐变 -->
<div class="div1"></div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/e0e2bba570712fa8be95057e6a176dfc.png)
- 可以有多个颜色值,并且可以用百分数定义它们出现的位置。
linear-gradient(to bottom, blue, yellow 20%, red);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
div {
width: 200px;
height: 200px;
margin: 10px;
/* deg表示度数 */
background-image: linear-gradient(90deg, red, green 80%, blue);
}
</style>
</head>
<body>
<!-- 背景渐变 -->
<div class="div1"></div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/dcb7e12000accc05db998224628d4e12.png)
径向渐变
- 盒子的background-image属性可以用radial-gradient()形式创建径向渐变背景。
/* 径向渐变属性值依次为圆心坐标、开始颜色、结束颜色 */
background-image:radial-gradient(50% 50%, red, blue);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First HTML Web</title>
<style>
div {
width: 200px;
height: 200px;
margin: 10px;
/* 径向渐变属性值依次为圆心坐标、开始颜色、结束颜色 */
background-image: radial-gradient(50% 50%, orange, green);
}
</style>
</head>
<body>
<!-- 背景渐变 -->
<div class="div1"></div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/5259ab04b71f6486964c3c9b1dd60843.png)
浏览器私有前缀
- 不同浏览器有不同的私有前缀,用来对试验性质的CSS属性加以标识 。
品牌 | 前缀 |
---|
Chrome | -webkit- |
Firefox | -moz- |
IE、Edge | -ms- |
欧朋 | -o- |