CSS如何实现渐变

前端布道人

已于 2023-04-14 01:46:13 修改

阅读量354

点赞数

分类专栏：前端杂货铺文章标签： css css3 html

于 2023-04-14 01:45:44 首次发布

本文链接：https://blog.csdn.net/BradenHan/article/details/130143955

版权

前端杂货铺专栏收录该内容

287 篇文章 1 订阅

订阅专栏

在这里插入图片描述

原理：

渐变实际上是作为background-image的，因此它可以被平铺(使用background-size来设置渐变的范围，然后再repeat平铺)，这样可以使用渐变做出格子、条纹等

垂直渐变

background: -webkit-gradient(linear, 0 0, 0 100%,from(#fff),to(#999), color-stop(.5,#eee));

background: linear-gradient(180deg,#fff 0,#eee 50%,#999 100%);

background: -ms-linear-gradient(top,#dbecf6 0%,#C0D9ED 100%);这个css3的可以用 IE11

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#999',GradientType=0);

2.水平渐变

background: -ms-linear-gradient(left,#dbecf6 0%,#C0D9ED 100%);这个css3的可以用 IE11

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab54e', endColorstr='#27aae1',GradientType=1);

background: -webkit-gradient(linear, 0 0,100% 0,from(#eab54e),to(#27aae1));

background: linear(0,#eab54e 0, #27aae1 100%);

3.倾斜的背景

background: -webkit-gradient(linear, 0% 0%,80% 100%, from(#0096d6), to(#eceff6),color-stop(60%,#0096d6),color-stop(60%,#eceff6));

background: linear-gradient(156deg, #0096d6 0%, #0096d6 60%, #eceff6 60%, #eceff6 100%);

更多参考：CSS3 渐变（Gradients）