教你怎么使用css3给图片添加渐变效果（代码详解）

之前的文章《手把手教你怎么使用CSS3实现动画效果（代码分享）》中，给大家介绍一下怎么使用css3动画效果设置经验。下面本篇文章给大家介绍怎么使用css3给图片添加渐变效果，伙伴们来看看一下。

初次接触css3渐变是在很早以前了，觉得这个东西很有意思哈，跟玩 PS 似的，可以做出很多华丽的东西。

浏览器支持情况

线性渐变 linear-gradient 

使用语法

linear-gradient([ [ [| to [top | bottom] || [left | right] ],]?[,]+);

以下代码都可以运行，执行的结果一样

linear-gradient(#fff, #333);
linear-gradient(to bottom, #fff, #333);
linear-gradient(to top, #333, #fff);
linear-gradient(180deg, #fff, #333);
linear-gradient(to bottom, #fff 0%, #333 100%);

可以定义角度，起始方向，颜色，以及颜色占比

立即学习“前端免费学习笔记（深入）”；

demo

填充试线性渐变 repeating-linear-gradient

用法和 linear-gradient 差不多，其实就是渐变的一个填充。可以精确到像素，比如实现一个斑马纹

径向渐变 radial-gradient

使用语法

radial-gradient( [ circle ||][ at]? , | [ ellipse || [|]{2}][ at]? , | [ [ circle | ellipse ] ||][ at]? , | at,[ ,]+ )

以下代码执行结果一样

radial-gradient(circle, #f00, #ff0, #080);
radial-gradient(circle at center, #f00, #ff0, #080);
radial-gradient(circle at 50%, #f00, #ff0, #080);
radial-gradient(circle farthest-corner, #f00, #ff0, #080);

可以通过 length 来快速定位形状的位置closest-side 渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。

closest-corner 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。

SoftGist

SoftGist是一个软件工具目录站，每天为您带来最好、最令人兴奋的软件新产品。

下载

farthest-side 与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。

farthest-corner 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

可以通过 at 来快速制定圆心的位置circle at left top圆心在左上角

• circle at right top圆心在右上角 

• circle at left bottom 圆心在左下角

• circle at right bottom 圆心在右下角

• circle at center | at 50% 圆心在正中间

代码示例

得到如下

填充式径向渐变repeating-radial-gradient

这个和 repeating-linear-gradient 使用差不多，就是对渐变的填充。

代码示例

得到如下

利用渐变可以做出很多效果

代码示例

如下图，可以做一个漂亮的气泡

然后再用上一篇文章的animation让他动起来。

看效果点这里  https://k-ui.cn  动画延迟，要等会才能呈现。

推荐学习：CSS3视频教程