多种CSS3渐变应用方法总结附实例

如下图所示,在网页设计中,有时候会需要用到渐变效果,渐变可以创建出类似于彩虹的视觉图案效果,在没有CSS3之前,为了显示一个渐变需要专门制作一个图片,这种不法不但不灵活还增加请求数,而CSS3可以轻松实现网页渐变效果,用于做渐变背景、渐变导航、配合CSS3动画做特效等。

在CSS3中,Gradient(渐变)分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。CSS颜色线性渐变的语法在各种浏览器里的实现稍微有些不同,但最后是统一标准的:

CSS颜色线性渐变的语法

第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。

至少需要两种颜色(起点和终点),你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色,或一种颜色加一个百分比:

因为CSS渐变色(Gradients)技术是CSS3里比较新的技术,属于高级的CSS功能,于是每种浏览器对这种技术的实现都添加了一些自己的特色。例如以WebKIt为渲染引擎的谷歌浏览器,就对它实现了多种语法。下面的这段代码基本包括了所有自顶向下颜色渐变的所有情况:

注意,我们首先设定了一个背景色。这个颜色是在万一用户使用的浏览器不支持CSS渐变色(Gradients)技术时使用的颜色。CSS渐变色(Gradients)技术里还支持带有角度的渐变方向,而不仅仅只有直上直下或直左直右。我们可以用下面的语法实现它:

我们可以做的更复杂些….一个色彩缤纷的CSS颜色渐变?下面我们来做一个彩虹:

关于IE对CSS颜色渐变技术的支持做一些说明:在早期IE是使用filter和-ms-filter语法实现渐变色,而最新版的IE里改为了-ms-linear-gradient语法。我们可以使用CSS里条件判断语句来解决这个问题:

线性渐变的语法

对象选择器

径向渐变的语法

对象选择器

渐变的兼容方法

1、线性渐变

各浏览器前缀

(1)Firefox

(2)Safari , Chrome

(3)Opera 11.10+

兼容IE

2、径向渐变

渐变应用实例

1、径向渐变做大背景

2、蒙版效果

3、渐变按钮

4、用径向渐变做一张优惠券

主要的代码如下:

完整代码:

CSS代码

HTML代码

PS:用这个方式还可以做邮票,不信你试试

相信你看到这,一定觉得,这么长串的代码,我怎么写出来,看着都晕。如果是简单的渐变,可以用less的函数来生成,只需要提供开始颜色和停止颜色。如果是按钮,则有专门的网站,可视化生成。

Less函数

用法:

本文完~

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180911B0E7NX00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券