【干货】CSS实现渐变色，详解

无为爱码仕

于 2018-05-31 19:26:13 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识库文章标签： CSS 前端 CSS实现渐变色 background

8 篇文章

订阅专栏

本文介绍如何使用CSS linear-gradient属性实现各种渐变效果。掌握角度设置、颜色过渡及高光阴影的应用，让网页设计更加生动。理解180deg角度含义及不同比例设置带来的视觉变化。

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

希望通过这个例子，让大家以后遇到渐变色的需求时都能从容应对：

background: linear-gradient( 角度 ,起始色 0%【起始色游标】, 结束色 0%【结束色游标】);

两游标之间为渐变色，当结束色游标在起始色游标之前时，以起始色游标为准。

#34d058 与 linear-gradient(180deg,#34d058 100%, #28a745 *%) 同色，*表示任意数字。

#28a745 与 linear-gradient(180deg,#34d058 0%, #28a745 0%) 同色。

background: linear-gradient(180deg,#34d058 0%, #28a745 100%)//等比例混色

180deg是从上到下，左边比例若从零增大，在0%到百分比处起高光效果；右边比例若从100%减小，在百分比到100%处起阴影效果。