css中background:-webkit-gradient实现背景渐变效果，并且兼容各个浏览器

心已赠人 2022-06-07 08:18 215阅读 0赞

实现渐变效果如下：

![SouthEast][]

在线生成渐变样式，工具地址(**很强大**)：[http://www.colorzilla.com/gradient-editor/][http_www.colorzilla.com_gradient-editor]

生成样式如下：

.swiper-button-prev:after {content: '';position: absolute;top: 0;right: -95px;width: 100px;height: 44px;
    
        background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
        }

附录一(充电)： [background:-webkit-gradient详解][background_-webkit-gradient]

附录二：[思路来源，感谢][Link 1]

[SouthEast]: /images/20220607/6f4d4eb7148947e1a28b3a36cc296566.png
[http_www.colorzilla.com_gradient-editor]: http://www.colorzilla.com/gradient-editor/
[background_-webkit-gradient]: http://blog.csdn.net/u012485291/article/details/46492237
[Link 1]: https://www.v2ex.com/t/376305

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS中如何实现元素的渐变背景（Gradient Background）效果？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ CSS 渐变背景效果 ⭐ 线性渐变背景 ⭐ 径向渐变背景 ⭐ 添加到元素的样式 ⭐ 写在最

雨点打透心脏的1/2处/ 2023年10月15日 14:26/ 0 赞/ 62 阅读

相关如何使用CSS实现一个渐变背景效果？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 使用CSS实现渐变背景效果 ⭐ 线性渐变（Linear Gradient） ⭐ 径向渐变（Radial

清疚/ 2023年10月14日 20:46/ 0 赞/ 15 阅读

相关 css背景渐变(灰色渐变背景)

css中文字的渐变怎么？css中文字的渐变怎么办洪资实业样式如下： .text-gradient \{ display: inline-block; colo

Dear 丶/ 2023年09月26日 13:13/ 0 赞/ 171 阅读

相关渐变！！！兼容各个网站；

header>p{position: relative;width:100%;height:300px;bottom:240px; filter: progid

ゝ一纸荒年。/ 2022年12月17日 10:59/ 0 赞/ 158 阅读

相关 CSS实现兼容性的渐变背景(gradient)效果

一、有点俗态的开场白要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对C

妖狐艹你老母/ 2022年09月30日 00:44/ 0 赞/ 252 阅读

相关 css中background:-webkit-gradient实现背景渐变效果，并且兼容各个浏览器

实现渐变效果如下： ![SouthEast][] 在线生成渐变样式，工具地址(很强大)：[http://www.colorzilla.com/gradien

心已赠人/ 2022年06月07日 08:18/ 0 赞/ 216 阅读

相关 CSS 实现背景色渐变和文字颜色渐变

1. 背景色渐变 A . linear-gradient：用线性渐变创建图像。语法：<linear-gradient> = linear-gradient(\[ \[ [

小咪咪/ 2022年04月01日 08:38/ 0 赞/ 703 阅读

相关 CSS3背景，渐变

1，有利于代码维护，有利于使用debug进行调试打断点。 2，后面三个都存在计算，所以分开写最好。背景复合属性最好的写法， background:\abcdef

﹏ヽ暗。殇╰゛Y/ 2021年12月20日 01:04/ 0 赞/ 445 阅读

相关 css3颜色渐变：css3如何实现背景颜色渐变？

为了开发网页的美观，css3背景颜色渐变是经常会用到的，那么，css3背景颜色渐变如何设置呢？本篇文章我们就来介绍关于css颜色渐变背景的设置方法。我们要知道的是cs...

朱雀/ 2021年01月29日 18:59/ 0 赞/ 950 阅读

相关 css如何实现网页背景动态渐变效果

linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止...

朱雀/ 2020年04月28日 06:35/ 0 赞/ 1112 阅读