给文字描边 css

方法一：text-stroke

这个方法的兼容性还可以，IE有的版本不支持。
这个方法的描边是在文字的边缘向内外同时描边。
例子代码：

<h2>项目跟进</h2>
<style>
	h2{
		font-size:50px;
		text-stroke:2px #2173ff;
		-webkit-text-stroke:2px #2173ff;
	}
</style>复制

效果：

方法二：text-stroke结合伪元素 :before

通过下边的例子可以看出来，
1、一定要写position：absolute，这样伪元素的文字才会覆盖元素的文字；
2、伪元素的文字颜色设置的话，会覆盖元素的文字颜色；
3、这个可以给元素加上data-content属性，然后伪元素的content写成这样：
content:“attr(data-content)”；
（attr()是用来获取被选中元素的某属性值,并且在样式文件中使用 ）

<h2>项目跟进</h2>
<style>
	h2{
		font-size:50px;
		-webkit-text-stroke: 10px blue;
		color:#fff;
	}
	h2:before{
		content:"项目跟进";
		position:absolute;
		-webkit-text-stroke: 2px red;
		color:yellow;
	}
</style>复制

效果：

方法三：text-shadow

text-shadow: x方向偏移量 y方向偏移量 模糊范围 模糊颜色
这个方法有个缺点，就是文字很大的时候，描的边很小的时候，看着描边连接的地方有缺口

<h2>项目跟进</h2>
<style>
	h2{
		font-size:50px;
		text-shadow: 2px 2px 0 #f00, 
             -2px 2px 0 #0f0, 
             2px -2px 0 #00f, 
             -2px -2px 0 #ff0;
	}
</style>复制

效果：

方法四：利用背景色，剪切文字，同时结合text-stroke

这个方法可以用来让文字渐变，或者文字有图片

<h2>项目跟进</h2>
<style>
	h2{
		font-size:50px;
		background: -webkit-linear-gradient(red, blue);
		-webkit-background-clip: text;
		-webkit-text-fill-color: #ffffff;
		-webkit-text-stroke: 6px transparent;
	}
</style>复制

效果：

<h2>项目跟进</h2>
<style>
	h2{
		font-size:50px;
		background: -webkit-linear-gradient(red, blue);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>复制

效果：

<h2>项目跟进</h2>
<style>
	h2{
		font-size:50px;
		background: url(https://tpc.googlesyndication.com/simgad/13804936456170932019/14763004658117789537?w=600&h=314);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>复制

效果：