CSS3渐变色详解：几种颜色之间的平稳过渡

心已赠人 2023-02-21 09:20 19阅读 0赞

![format_png][]

--------------------

渐变区域一直是装饰前端页面的重要饰品，在CSS3的渐变色属性出来之前这一效果只能借助设计师的图片来进行装饰，这样会平白给页面增加了一些http请求次数并增大了页面体积，最终导致延长页面的加载时间。而渐变色属性的出现则很大程度上解决了该问题，那我们今天就详细剖析一下这个渐变色属性。

![format_png 1][]

渐变色的定义

![format_png 2][]

所谓渐变色，一般是指在两个及以上的颜色之间呈现一种平滑的过渡效果，该效果是矢量效果，不会因为页面的放大而出现模糊的情况，CSS3中定义了两种渐变类型，一种为线性渐变，一种为径向渐变。

![format_png 1][]

CSS3线性渐变

![format_png 2][]

我们首先在页面中创建一个div盒子，并以该盒子作为渐变色的使用载体。

.gradient{
    
    width:100px;
    
    height:100px;
    
    background:red;
    
    }
    
    <div class="gradient"></div>

![format_png 3][]这是页面常见的装饰元素的方法，及通过background给某个元素设置单个背景颜色，我们今天讲的渐变色则是对background的颜色值的一种描述，接下来我们看一个案例。

.gradient{
    
    width:100px;
    
    height:100px;
    
    background:linear-gradient(red 0%,blue 100%);
    
    }
    
    <div class="gradient"></div>

![format_png 4][]

其实我们完全可以把给元素设置颜色理解为给一堵墙刷一个油漆，这个油漆怎么刷完全是由户主自己决定的，我们传统的方法要么是给墙刷一个颜色的油漆，要么是给墙上贴一张海报（background-image），而渐变色则是给墙上刷多种颜色。不同的参数具体意义如下。

![format_png 5][]

我们还可以在颜色前面加上方向控制，渐变色默认给咱们加的是从上往下：linear-gradient(to bottom，red 0%,blue 100%)，我们可以通过对to后面的方向进行自定义可实现不同的效果，如：

*  从下往上linear-gradient(to top，red 0%,blue 100%)，下红上蓝

![format_png 6][]

*  从左往右linear-gradient(to right，red 0%,blue 100%)，左红右蓝

![format_png 7][]

*  从右往左linear-gradient(to left，red 0%,blue 100%)，右红左蓝

![format_png 8][]

*  从左上到右下linear-gradient(to bottom right, red , blue），左上红右下蓝

![format_png 9][]

![format_png 1][]

CSS3径向渐变

![format_png 2][]

###     ###

径向渐变和线性渐变的唯一不同就是添加颜色的方向，径向渐变类似画同心圆，一层层的往外面画圈圈，下面我们来看一个案例

.gradient{
    
    width:100px;
    
    height:100px;
    
    background:radial-gradient(red 0%,blue 100%);
    
    }
    
    <div class="gradient"></div>

![format_png 10][]其实我们同样可以这么理解，我们一开始拿着红颜色的油漆从墙的中心点开始刷油漆，然后不停的画圈圈，直到圆圈碰到墙的边缘，边缘之外的区域全部刷上蓝色的油漆，我们可以拿示意图详细了解一下。

![format_png 11][]

> 多谢各位观看, 我是万章, 前端是一桌丰盛的大餐，当我们能够深挖进去时便能够享受其无边的美味，如果有同学想要和万章老师一起享受这份饕餮大餐, 可以加我的**QQ:647789540**，我们一起开饭啦

![format_png 12][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVSmJ3OHU5bjFwb3dYOWJ4cXplZHhDYmdsRFFtYUFzOUZ5RVc0dDB2VU90ODlJVnNLY0l6aWJXb2s4bFNqSUtQdDhGSzRzdExJV0hFbFEvNjQw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5OTWtqd2liVEs0YzI3ZDdpYTdwa3JoY3RjYVVaUGpIcU5PTk9saWFrcXZYbURPSGlhZ09wTEFZeWliQS82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm4zRWxCSVVNYXJwUmljUVVUakpkZEJFSFQ4VFd2RTZZM2djU0hPbHNVdUlkSzBkMXUyNE0yQm9BLzY0MA?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5sTmhJcnVzVUlVdGlhWjBIaWMwQkhhTkQ2cEZOcmVrNk5lUmFJY29JVUVVZFgxSWhXbnp4Qlhhdy82NDA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5YcGZVbUt3T2REWEVjcGNKaWFyQWRkNmljcW9hR1VuSjZjYWlidUVvS2pKMEdwSWlhM1Z0S0ZUaGljdy82NDA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm56eThXTFRTQTc5cGpiaWF0SDBNQ2w1bVFHYjVEaWJtY1huNEFwUXMwWkFLUGY4SHpoWHZMTGlhSVEvNjQw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5pY2hzcG1uakg1S3ppYnV6MXBNWTRhUFRqV1g4OGxNZ25pYmFHNHhYVTJwdmljVVVldU9vQlRvd293LzY0MA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm50RmZyMXg0RkV6SWUwOFludmVsWmlibzVET2lhc2txR3BqNllkdWhzWGplZGdsamc3dDBPSjEwdy82NDA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5vaEl3bTQwT3ZtU1ZiUDRWUXhDc2dKMW5UTGliUTFMRkpSV2IwdmxKWjgwcVA5d0c0S05PS3dRLzY0MA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm41N1JBM1R2SjZ1QWpCcHZpY0luTGVxb0I2blJ1bEQzaWI4Uk9JblFpYjF0WEVyQnFCcTVTOXFmOWcvNjQw?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm40VnBNS2VZdXN6TWtxMld5UmR0YXhEWHV0QnZGdWtZdkl6bUN6OGIxMFNZS2FOUlRlSzY2cUEvNjQw?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9sR2x2b0tIblJVS1ZSaWNzbTRMbmR1QWRUTnp2MHgzTm5zWWZ6S1FYcmEyeU93a1NXeWpDUFN2bXYwZjVTOTVmQUswRDE5SzZYZ05LMTg5VTVVUDhSS3cvNjQw?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9sR2x2b0tIblJVSmJ3OHU5bjFwb3dYOWJ4cXplZHhDYm9zd042MFJpYjlyWHlsVllIR0FIMG5kRnBOMzVXbXhKdkxsT3FPR3BuOWljN1QzeFJrYXc4ZFJBLzY0MA?x-oss-process=image/format,png