CSS中的颜色渐变

最新推荐文章于 2025-03-22 01:30:05 发布

Zlantan

最新推荐文章于 2025-03-22 01:30:05 发布

阅读量894

点赞数 2

文章标签： css html5

本文链接：https://blog.youkuaiyun.com/Zlantan/article/details/105231407

版权

CSS颜色渐变

CSS3功能强大，可以实现颜色渐变的效果，减少了图片的插入，提高了网页的运行效率，同时，由于这种渐变是由浏览器生成，因此放大后效果更好。

颜色渐变，顾名思义，就是在一块我们指定的区域内，颜色逐渐由一种颜色过渡到另一种颜色，在这个过程中也可以经历多种颜色。那么想一下，初始的颜色应该是什么样呢，有两种情况，一种是点，一种是线。当初始的颜色区域是一个点的时候，他会呈辐射转向外逐渐改变自己的颜色，这种变化我们叫做径向渐变。当初始颜色为一条线时，他会延自身垂线方向逐渐改变颜色，这种变化我们称之为线性渐变，下图为两个简单的例子方便理解。

首先我们来研究线性渐变，线性渐变的完整写法为：
background-image: linear-gradient(direction, color1 percent1, color percent2, …);
Direction会控制渐变的方向，默认为to bottom（180deg），也就是说，0deg为0点钟方向，沿顺时针逐渐增大。Color为颜色属性，可以自由定义，同样的也可以自由地定义个数。Percent为位置属性，也就是你希望的颜色出现的位置，通常用百分数表示，当不写这个值时，默认为平均分配。以下为几个简单的例子。

div{width: 200px;height: 200px;background-image:linear-gradient(to right,#09E100,#0023E1 70%,#534);}	div{width: 200px;height: 200px;background: linear-gradient(30deg, #ffff00 30%, #ff0000, #00ff00); }

解释：从左至右完成渐变指令，初始为#09E100颜色，70%位置为#0023E1颜色，最右边为#534颜色。	解释：向30度角方向（0度为12点方向）完成渐变任务，前30%不发生渐变，全部为#ffff00颜色，65%位置为#ff0000颜色，最终为#00ff00颜色。

可以看出，想完成最简单的渐变，至少需要两个颜色和一个方向，更复杂的就可以按照艺术功底自由发挥了。
接下来我们聊一聊径向渐变，径向渐变的完整写法如下：

background-image:radial-gradient(position , shape ，size first-color, …, last-color);

Posititon为渐变色起始点的位置，可以用百分数表示，也可以用像素表示，x轴在前，y轴在后，中间用空格隔开。
Shape为形状，默认为椭圆（ellipse），如果希望是圆形，可以手动改为circle。
Size为渐变区域的大小，当Shape为圆时，size可以设置像素，限定渐变区域的半径，不可以设置为百分比。当Shape为椭圆时，size可以设置像素或百分比，当设置百分比时，他分别表示长边半径和短边半径与元素宽与高的比值。无论哪种方法，都可以使用以下几种方式设置。closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。当遇到渐变停止点时，剩下的面积仍会被颜色填满，颜色为截止时该方向的颜色。
以下为几个简单的例子：
|

background: -webkit-radial-gradient(60% 55%, farthest-corner, blue, green, yellow, black);	background: radial-gradient(30px 50px at center, yellow, red);

渐变中心在60%，55%位置，扩散形状为椭圆形，扩散到最远的角落停止，颜色经历蓝、绿、黄、黑，从中心点至最远角的连线上，颜色均匀分配。	渐变中心在元素中心，扩散方式为椭圆，横向半径为30px，纵向半径为50px，颜色由黄至红，红色第一次出现的位置是横向半径为30px，纵向半径为50px的椭圆的边界，以外的位置均为红色。