css渐变描边视频,CSS制作渐变描边等文字特效
前端开发工作中遇到的文本有很多特效，比如渐变色、描边、带渐变色的描边、文字外发光、投影等等。现在总结一些经验，方便以后使用。
Tips: 以下方法并没有考虑兼容性，仅在chrome下测试。
text-shadow
利用 text-shadow实现文字描边，仔细一想是不是很酷？我们给文字加一圈不模糊的阴影，不就是在给文字描边吗？具体可以这样操作：
Hello
.demo1 {
font-size: 100px;
font-weight: 800;
color: #232d2d;
text-transform: uppercase;
text-shadow: 1px 0 0 #eef85b, 0 1px 0 #eef85b, -1px 0 0 #eef85b, 0 -1px 0 #eef85b;
}
一个可爱的描边效果诞生了：
text-shadow描边效果
这还没完，如果我们想描得粗一点呢？比如3px的描边：
3px text-shadow描边效果
不对劲欸，描出来的边不可导，哦不，不连续。不过换个角度，我们也创造了一种神奇的效果，类似像素风。看来，text-shadow 比较适合1px 这种比较难用肉眼去分辨文字拐角是否连续的描边效果。
-webkit-text-stroke
说到描边，可以使用已有的CSS描边属性，CSS标准里还没有，只有带浏览器前缀的属性：-webkit-text-stroke。如果你需要考虑浏览器的兼容性，就不要考虑用这个属性了，IE浏览器是不支持的。
浏览器对 -webkit-text-stroke 的兼容性
当我们使用了这个属性，可能会发现文本变瘦了，好像描边挤到了文本内容。为了研究-webkit-text-stroke的使用原理，特意给文本加上了半透明效果的描边，如下图所示。
-webkit-text-stroke 简单使用
CSS代码如下：
.demo2 {
font-size: 200px;
font-weight: 800;
color: #fff;
text-transform: uppercase;
-webkit-text-stroke: 16px rgba(0, 0, 0, 0.5);
}
描边的时候，浏览器是会沿着文本的外沿，以外沿边界为中心，左右对称的渲染描边效果。也就是说，如果描边的宽度是2px，那么文本外被描到1px，文本内被描到1px。所以文本的描边会占用文本本身，也就会让文本看起来变瘦。这种描边有时候并不是我们想要的效果，如何在文本外进行描边而不占用文本本身呢？这个时候就可以使用增强版的-webkit-text-stroke描边技术。
我们需要把它的颜色设置成透明。如果仅进行如此操作，文本没有任何变化，还需要借助-webkit-background-clip属性。这个属性的取值有很多，这里用到了text。-webkit-background-clip:text; 这样使用可以让背景色的显示区域剪裁成前景中文本的形状。当文本是透明的时候，就能显示出背景色了。干巴巴地说，还是无法显露出这种方法的精髓，现在上个例子：
先给文本设置一个透明色描边：
.demo2 {
-webkit-text-stroke: 16px rgba(0, 0, 0, 0);
}
设置成透明色描边
再给文本区域设置渐变背景色：
.demo2 {
-webkit-text-stroke: 16px rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(-86deg, #eef85b 5%, #7aec8d 53%, #09e5c3 91%);
}
文本区域设置渐变背景色
有点意思了，然后把背景色的显示区域剪裁成前景中文本的形状：
.demo2 {
-webkit-text-stroke: 16px rgba(0, 0, 0, 0);
background: -webkit-linear-gradient(-86deg, #eef85b 5%, #7aec8d 53%, #09e5c3 91%);
-webkit-background-clip: text;
}
背景色的显示区域剪裁成前景中文本的形状
哦了，无形中制作出了渐变色描边效果，描边宽度 8px。而且也能意识到，描边是文本的一部分。把渐变色背景改成纯色或者图片，大家应该能想象到效果吧。
如果我们再多加一个CSS样式：-webkit-text-fill-color: transparent;，又会变成什么效果呢？答案马上揭晓：
揭晓答案
文字太粗了？没事儿，把描边样式删掉就可以变成正常宽度的这种渐变文字效果了。无形中又增加了奇怪的技能。
filter:drop-shadow()
This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.
非常有用的一个属性，比如上面我们提到的text-shadow实现 3px 描边会比较尴尬，但是用这个属性就再也不用担心了：
3px drop-shadow() 描边效果
CSS代码如下：
.demo3 {
font-size: 100px;
font-weight: 800;
color: #232d2d;
text-transform: uppercase;
filter: drop-shadow(3px 0 0 #eef85b) drop-shadow(-3px 0 0 #eef85b)
drop-shadow(0 3px 0 #eef85b) drop-shadow(0 -3px 0 #eef85b);
}
drop-shadow()用来实现外发光也超nice，当然也可以使用text-shadow。
文字外发光效果