css网页布局与美化教程 css字体描边颜色 _生活百科

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

文章插图
第一步，实现文字渐变这里要用一种 CSS3新出的属性： background-clip: text
background-clip 的定义：规定背景的绘制区域；简而言之，background-clip 就是规定
background-color/background-image 背景（色/图）在盒模型里的作用范围…
【css网页布局与美化教程 css字体描边颜色】那么使用了 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 是无法做到渐变的同时进行描边的。。。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「爱刨根生活网」www.aipaogen.com小编还为您精选了以下内容，希望对您有所帮助：