css网页布局与美化教程css字体描边颜色

css网页布局与美化教程css字体描边颜色

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

第一步，实现文字渐变这里要用一种 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 是无法做到渐变的同时进行描边的。。。

2024-05-18