前客户提的新需求中有文字渐变效果加文字描边效果，之前只用过单一的，但是组合起来就爆掉了，各种尝试找出了一种完美解决方案。

第一步，实现文字渐变

这里要用一种 CSS3新出的 属性： background-clip: text

background-clip 的定义：规定背景的绘制区域；简而言之，background-clip 就是规定background-color/background-image 背景（色/图）在盒模型里的作用范围...

那么使用了 background-clip: text 这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

知道了这个特性之后，我们把背景设为图片背景或者渐变背景之后在只用这个属性就可以得到一个背景文字效果或者渐变文字效果！

eg :

背景图

background-clip: text 转背景文字效果:

渐变效果：

实现了 渐变文字之后我们就该实现文字外边框了：

第二步，实现文字描边

-webkit-text-stroke

CSS属性为文本字符指定了宽 和 颜色 . 它是-webkit-text-stroke-width 和-webkit-text-stroke-color 属性的缩写。

• text-stroke-width： 设置或检索对象中的文字的描边厚度。
• text-stroke-color：设置或检索对象中的文字的描边颜色。

虽然-webkit-text-stroke是webkit内核浏览器的私有属性，但是FireFox也支持这个样式，唯独IE浏览器不支持。所以在移动端是可以放心使用这个属性的。

如图所示，-webkit-text-stroke的第一个字段设置描边的宽度，第二个设置描边的颜色。

实现渐变文字描边

两种属性配合使用便可。

ps: text-shadow, border 是无法做到渐变的同时进行描边的。。。

：测试浏览器版本号——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

之前《CSS之渐变效果的实现》中有讲到边框颜色渐变，但是只有讲最普通的边框渐变，其作用于圆角边框渐变时会覆盖掉圆角的效果，这不是我们预期的，所以我们需要寻找其他的方法解决这个需求。

当盒子同时设置圆角（radius）和渐变时，圆角失效，因此不能用这种方式来实现圆角边框颜色渐变。我们可以使用下面三个方法实现

1 使用背景重叠

在此之前我们先来看看三个跟背景有关的属性background-origin,background-clip,background-size。

background-origin表示的是背景起始位置，其三个值如下，依次是

• border-box 从边框开始；
• padding-box(默认) 从内边距开始；
• content-box 从内容开始。

background-origin: border-box | padding-box(默认) | content-box

background-clip表示的是背景填充位置，其四个值如下，依次是

• border-box(默认) 填充至边框；
• padding-box 填充至内边距；
• content-box 填充之内容；
• text 作为字体前景色。

background-clip: border-box(默认) | padding-box | content-box | text

background-size表示的是背景尺寸，其五个值如下，依次是

• contain 将图像扩大至适应最短的边，剩余部分默认重复图像
• cover 将图像扩大至适应最长的边，图像可能显示不完整
• length 两个值依次设置图像宽和高，未设置则为auto
• percentage 两个百分比依次设置图像宽和高，未设置则为auto
• auto 默认设置

background-size: contain | cover | <length> | <percentage> | auto(默认)

以下面代码为例

div {
 width: 900px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border:50px solid transparent;
 background-origin:border-box;
 background-clip: content-box,padding-box, border-box;
 background-size: contain,50px 50px,cover;
 background-image:url("css.jpg"),linear-gradient(yellow, green),url("css.jpg");
}

效果如图

由上面的例子我们可以看出：

1. background-image可以多次添加图片或者渐变，需要用","隔开按照添加顺序依次由上往下层叠，简单来讲就是谁先声明，谁层级高。
2. background-origin,background-clip,background-size同样可以设置多个值，用","隔开，每个值对应的是background-image的值。

有了上述的知识，我们现在可以实现我们的需求了，其主要原理是利用背景重叠，第一个背景设置范围为padding和content，第二个背景设置范围为border，padding和content，那么第二个背景只有border显示，其中padding和content被第一个背景覆盖。

话不多说，上代码

div {
 width: 900px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*设置圆角*/
 border:50px solid transparent; /*设置边框颜色透明，确保背景渐变色显示*/
 background-origin:border-box; /*从边框开始背景图*/
 background-clip: padding-box, border-box; /*设置第一个背景和第二个背景的范围*/
 background-size: cover;
 /*由于背景图像不能设置纯色，所以可以使用下面的方式设置纯色*/
 background-image:linear-gradient(#fff, #fff),linear-gradient(yellow, green); 
}

效果如图

2 使用伪元素

让我们先来看代码

div {
 width: 900px;
 height: 300px;
 margin: 10px;
 padding: 30px;
 border-radius: 50px; /*设置圆角*/
 border:50px solid transparent; /*设置边框颜色透明，确保背景渐变色显示*/
 background-clip: padding-box; /*确保此北京范围为内边距内*/
 background: #fff;
}
div::after {
 position: absolute;
 /*以div的content为基准往外扩border的宽度*/
 top: -50px; 
 bottom: -50px; 
 left: -50px;
 right: -50px;
 border-radius: 50px;
 /*设置伪元素背景渐变色*/
 background-image: linear-gradient(yellow, green);
 content: '';
 /*利用层叠将div部分背景置顶*/
 z-index: -1; 
}

效果如下图，与方法1中效果相同

3 使用遮罩

使用遮罩，顾名思义就是在div外面加一层div，其大小正好比里面的div大border的宽度，通过外面div的背景渐变来模拟圆角边框渐变。

具体代码如下：

/*内部div样式*/
.inside {
 width: 960px;
 height: 360px;
 margin: 10px;
 padding: 0px;
 border-radius: 50px; /*设置圆角*/
 border:50px solid transparent; /*设置边框颜色透明，确保背景渐变色显示*/
 background-origin:border-box; /*从边框开始背景图*/
 background-image: linear-gradient(yellow, green);
}
/*外部div样式*/
.outside {
 background: #fff;
 width: calc(100% - 60px);
 height: calc(100% - 60px);
 padding: 30px;
}

效果如下图，与方法1中效果相同

注意

在实验过程中有以下几点需要注意：

1. 属性background-origin,background-clip,background-size针对于background-image生效，如果使用background进行渐变色的设置可能会出现不符预期的效果。
2. 边框外侧有圆角而内部无圆角是因为边框宽度设置比较大，圆角又设置的比较小。有兴趣的可以自己实验一下

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

好雨知时节，当春乃发生。 随风潜入夜，润物细无声。

春节已经过去，新的一年刚刚开始，小伙伴们，今年你的目标是什么？定个小目标，挣它一个亿？分享一下我的目标，是让大家的web前端能力，更上一层楼。

下面进入主题，看下图：

这个动画效果，如果让你来做，你会选择什么方式？相信很多小伙伴都会用gif图片。其实用css实现也很简单。

如果文章中有不懂的知识点，请点击文章最下方，推荐文章哦

动画解析

很明显这个动画效果，是上中下结构，所以我们分3部分实现。

1、云：由多个圆拼接而成，并且有上下浮动的动画效果

2、雨滴：多个，从上而下的动画效果

3、阴影：椭圆，缩放动画效果

下面我们按步骤实现

云

用box-shadow制作多个圆，完成拼接，行程完整的云朵。animation，添加动画，上下浮动。

语法：box-shadow: h-shadow v-shadow blur spread color inset;

注：box-shadow，向框内添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

相关推荐CSS3 box-shadow实现背景动画

.rainy {
 position: absolute;
 top: 30%;
 left: 50%;
}
.rainy:before {
 content: "";
 color: #333;
 position: absolute;
 height: 50px;
 width: 50px;
 top: 30px;
 left: -40px;
 background: #CCC;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 box-shadow: #CCC 65px -15px 0 -5px, 
 #CCC 25px -25px, 
 #CCC 30px 10px, 
 #CCC 60px 15px 0 -10px, 
 #CCC 85px 5px 0 -5px;
 animation: cloudy 5s ease-in-out infinite;
}
@keyframes cloudy {
 50% {
 transform: translate(-50%, -70%);
 }
 100% {
 transform: translate(-50%, -50%);
 }
}

雨滴

雨滴和云一样，都是用box-shadow来实现，但是雨滴的实现要复杂的多，雨滴数量多，每个雨滴位置的改变。

.rainy {
 position: absolute;
 width: 3px;
 height: 6px;
 top: 30%;
 left: 50%;
 animation: rainy_rain .7s infinite linear;
}
.rainy:before {
 ...
}
@keyframes cloudy {
 ...
}
@keyframes rainy_rain {
 0% {
 box-shadow: 
 rgba(0, 0, 0, 0) -10px 30px, 
 rgba(0, 0, 0, 0) 40px 40px, 
 rgba(0, 0, 0, .3) -50px 75px, 
 rgba(0, 0, 0, .3) 55px 50px, 
 rgba(0, 0, 0, .3) -18px 100px, 
 rgba(0, 0, 0, .3) 12px 95px, 
 rgba(0, 0, 0, .3) -31px 45px, 
 rgba(0, 0, 0, .3) 30px 35px;
 }
 25% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 45px,
 rgba(0, 0, 0, .3) 40px 60px,
 rgba(0, 0, 0, .3) -50px 90px,
 rgba(0, 0, 0, .3) 55px 65px,
 rgba(0, 0, 0, 0) -18px 120px,
 rgba(0, 0, 0, 0) 12px 120px,
 rgba(0, 0, 0, .3) -31px 70px,
 rgba(0, 0, 0, .3) 30px 60px;
 }
 26% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 45px,
 rgba(0, 0, 0, .3) 40px 60px,
 rgba(0, 0, 0, .3) -50px 90px,
 rgba(0, 0, 0, .3) 55px 65px,
 rgba(0, 0, 0, 0) -18px 40px,
 rgba(0, 0, 0, 0) 12px 20px,
 rgba(0, 0, 0, .3) -31px 70px,
 rgba(0, 0, 0, .3) 30px 60px;
 }
 50% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 70px,
 rgba(0, 0, 0, .3) 40px 80px,
 rgba(0, 0, 0, 0) -50px 100px,
 rgba(0, 0, 0, .3) 55px 80px,
 rgba(0, 0, 0, .3) -18px 60px,
 rgba(0, 0, 0, .3) 12px 45px,
 rgba(0, 0, 0, .3) -31px 95px,
 rgba(0, 0, 0, .3) 30px 85px;
 }
 51% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 70px,
 rgba(0, 0, 0, .3) 40px 80px,
 rgba(0, 0, 0, 0) -50px 45px,
 rgba(0, 0, 0, .3) 55px 80px,
 rgba(0, 0, 0, .3) -18px 60px,
 rgba(0, 0, 0, .3) 12px 45px,
 rgba(0, 0, 0, .3) -31px 95px,
 rgba(0, 0, 0, .3) 30px 85px;
 }
 75% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 95px,
 rgba(0, 0, 0, .3) 40px 100px,
 rgba(0, 0, 0, .3) -50px 60px,
 rgba(0, 0, 0, 0) 55px 95px,
 rgba(0, 0, 0, .3) -18px 80px,
 rgba(0, 0, 0, .3) 12px 70px,
 rgba(0, 0, 0, 0) -31px 120px,
 rgba(0, 0, 0, 0) 30px 110px;
 }
 76% {
 box-shadow:
 rgba(0, 0, 0, .3) -10px 95px,
 rgba(0, 0, 0, .3) 40px 100px,
 rgba(0, 0, 0, .3) -50px 60px,
 rgba(0, 0, 0, 0) 55px 35px,
 rgba(0, 0, 0, .3) -18px 80px,
 rgba(0, 0, 0, .3) 12px 70px,
 rgba(0, 0, 0, 0) -31px 25px,
 rgba(0, 0, 0, 0) 30px 15px;
 }
 100% {
 box-shadow:
 rgba(0, 0, 0, 0) -10px 120px,
 rgba(0, 0, 0, 0) 40px 120px,
 rgba(0, 0, 0, .3) -50px 75px,
 rgba(0, 0, 0, .3) 55px 50px,
 rgba(0, 0, 0, .3) -18px 100px,
 rgba(0, 0, 0, .3) 12px 95px, 
 rgba(0, 0, 0, .3) -31px 45px, 
 rgba(0, 0, 0, .3) 30px 35px;
 }
}

阴影

阴影实现是最简单的啦，加上缩放，透明度改变就可以了，当然要和上面的云配合起来，云上，阴影变小，云下，阴影变大。

.rainy:after {
 content: "";
 position: absolute;
 top: 120px;
 left: 50%;
 height: 15px;
 width: 120px;
 background: rgba(0, 0, 0, .5);
 border-radius: 50%;
 transform: translate(-50%, -50%);
 animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy_shadow {
 50% {
 transform: translate(-50%, -50%) scale(0.8);
 background: rgba(0, 0, 0, .2);
 }
 100% {
 transform: translate(-50%, -50%) scale(1);
 background: rgba(0, 0, 0, .5);
 }
}

演示地址：http://demo.javanx.cn/raindrop/index2.html

推荐文章

CSS3 box-shadow实现背景动画

从浅到深的学习 CSS3阴影(box-shadow)

CSS3最容易混淆属性transition transform animation translate

公告

喜欢小编的点击关注，了解更多知识！

源码地址和源文件下载请点击下方“了解更多”