之前客户提的新需求中有文字渐变效果加文字描边效果 , 之前只用过单一的,但是组合起来就爆掉了 , 各种尝试找出了一种完美解决方案 。
文章插图
第一步 , 实现文字渐变
这里要用一种 CSS3新出的 属性: background-clip: text
background-clip 的定义:规定背景的绘制区域;简而言之,background-clip 就是规定background-color/background-image 背景(色/图)在盒模型里的作用范围…
那么使用了 background-clip: text 这个属性的意思是,以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景 , 文字之外的区域都将被裁剪掉 。
知道了这个特性之后,我们把背景设为图片背景或者渐变背景之后在只用这个属性就可以得到一个背景文字效果或者渐变文字效果!
【css中如何给字体加描边 css 实现渐变描边样式】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的第一个字段设置描边的宽度,第二个设置描边的颜色 。
实现渐变文字描边
文章插图
两种属性配合使用便可 。
ps: text-shadow, border 是无法做到渐变的同时进行描边的 。。。
- ps磨皮效果最好的方法
- 紧急预警!这条朋友圈内容不能转发怎么办
- 中国四京是哪四京,中国四京指的是现代哪几个城市?
- 刚死的螃蟹能吃吗哪些部位不能吃
- vivo pad支持内存扩展吗 vivo手机内存扩展有用吗
- 淡水鱼里哪个种鱼寿命最长 最长寿的淡水鱼
- 真正得癌前一定会出现的5个症状 出现这5个症状说明得了癌
- 苹果手机为什么不需要安装杀毒软件
- 搞定48个平台的工具