背景渐变色

最新推荐文章于 2024-12-12 17:42:29 发布

小城听风雨

最新推荐文章于 2024-12-12 17:42:29 发布

阅读量2.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： CSS3心得整理文章标签： css渐变色背景渐变 css3渐变色 ie渐变兼容

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/a5252145/article/details/95312345

CSS3心得整理专栏收录该内容

14 篇文章

订阅专栏

博客主要介绍了CSS背景渐变色相关内容，提到CSS3使用linear-gradient实现，对于IE则需用滤镜filter。因filter是IE私有属性，还需针对IE9单独处理滤镜效果，并给出了最终写法、一般写法等。

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

背景渐变色

css3：linear-gradient

.gradient{
    background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}

ie 滤镜：filter

.gradient{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}

由于 filter 是 ie 的私有属性，所以我们需要针对 ie9 单独处理滤镜效果，代码如下：

:root {filter:none;}

最终写法：

.gradient{
    background: #000000;
    background: -moz-linear-gradient(top,  #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #000000 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}
:root .gradient{filter:none;}

一般写法：

/* 实际用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

常用：对角

background: -webkit-linear-gradient(top right, #98f3e1 , #1583e6); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(top right, #98f3e1 , #1583e6); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(top right, #98f3e1 , #1583e6); /* Firefox 3.6 - 15 */
background: linear-gradient(to top right, #98f3e1 , #1583e6); /* 标准的语法 */