CSS3之渐变（线性渐变，径向渐变）

最新推荐文章于 2025-07-15 14:44:59 发布

tianshizhimeng155

最新推荐文章于 2025-07-15 14:44:59 发布

阅读量6.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Web前端 css3

本文链接：https://blog.youkuaiyun.com/u013267266/article/details/51134335

Web前端同时被 2 个专栏收录

45 篇文章

订阅专栏

css3

19 篇文章

订阅专栏

本文深入探讨了线性渐变与径向渐变的基本概念、语法及参数，并通过实例展示了它们在网页设计中的应用，包括进度条、光影效果等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

渐变

一、线性渐变

1 线性渐变格式

linear-gradient([<起点> || <角度>,]? <点>, <点>…)

只能用在背景上

2 IE filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');

<style>

.box{width:300px;height:300px;background:-webkit-linear-gradient(red,blue);background:-moz-linear-gradient(red,blue);background:linear-gradient(red,blue);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='red',endColorstr='blue',GradientType='0');}

</style>

</head>

<body>

<divclass="box"></div>

</body>

3 参数

起点：从什么方向开始渐变默认：top

left、top、left top

从上到下

<style>

.box{width:300px;height:300px;border:10pxsolid #000; background-image:-webkit-linear-gradient(red,blue);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

角度：从什么角度开始渐变

xxx deg的形式

逆时针

.box{width:300px;height:300px;border:10pxsolid #000; background-image:-webkit-linear-gradient(60deg,red,blue);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

点：渐变点的颜色和位置

black 50%，位置可选

<style>

.box{width:300px;height:300px;border:10pxsolid #000; background-image:-webkit-linear-gradient(60deg,red,blue,yellow,blue);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

<style>

.box{width:300px;height:300px;border:10pxsolid #000; background-image:-webkit-linear-gradient(60deg,red0,blue 50%,green 100%);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

4 repeating-linear-gradient

<style>

.box{width:300px;height:300px;border:10pxsolid #000; background-image:-webkit-repeating-linear-gradient(60deg,red0,blue 30px);}

</style>

</head>

<body>

<divclass="box"></div>

</body>

5 线性渐变实例

加入点的位置

top, red 40%,green 60%

top, red 50%,green 50%

同一个位置两个点——直接跳变

也可以用px

配合rgba

top,rgba(255,255,255,1), rgba(255,255,255,0)

加入背景图片

background: -webkit-linear-gradient (top, rgba(255,255,255,1) 30%,rgba(255,255,255,0)), url(a.gif)

6 实例1：进度条

<style>

.wrap{width:200px;height:30px;overflow:hidden;border:1pxsolid #000;}

.box{width:400px;height:30px;background:-webkit-repeating-linear-gradient(15deg,green0,green 10px,#fff 10px,#fff 20px); transition:3s;}

.wrap:hover .box{margin-left:-100px;}

</style>

</head>

<body>

<divclass="wrap">

<divclass="box"></div>

</div>

</body>

鼠标移上，向左运动，实现类似进度条的效果

7 实例2：百度音乐图片光影效果

<style>

.box{width:300px;height:300px;background:-webkit-linear-gradient(-30deg,rgba(255,255,255,0)0,rgba(255,255,255,0) 150px,rgba(255,255,255,1) 170px,rgba(255,255,255,1)180px,rgba(255,255,255,0) 210px) no-repeat,url(new_bg.png) no-repeat;transition:1s;}

</style>

</head>

<body>

<divclass="box"></div>

</body>

鼠标移上，运动起来

<style>

.box:hover{background-position:300px0,-100px -100px;}

</style>

</head>

<body>

<divclass="box"></div>

</body>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div{
width:400px;
height:220px;
margin:20px 0;
color:#fff;
/*直接使用background缩放版本*//*每个渐变点的位置不能太小，不然会出现残缺光斑*//*no-repeat -270px 0：将光斑定位隐藏起来*/background:-webkit-linear-gradient(-30deg, rgba(255, 255, 255, 0)0, rgba(255, 255, 255, 0)230px, rgba(255, 255, 255, 0.1)260px, rgba(255, 255, 255, 0.1)270px, rgba(255, 255, 255, 0)300px, rgba(255, 255, 255, 0)310px) no-repeat -270px 0, url(new_bg.png) no-repeat;
transition:1s;
}
#div:hover{
/*鼠标滑过实现光斑滑动，但是在多背景情况下，需要多个background-position属性值，否则会影响其他背景*/background-position:200px 0, 0 0;
}
</style>
</head>
<body>
<div id="div">

</div>
</body>
</html>