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-strokewebkit 内核浏览器的私有属性,但是FireFox 也支持这个样式,唯独IE浏览器不支持。所以在移动端是可以放心使用这个属性的。

如图所示,-webkit-text-stroke 的第一个字段设置描边的宽度,第二个设置描边的颜色。

实现渐变文字描边

两种属性配合使用便可。

ps: text-shadow, border 是无法做到渐变的同时进行描边的。。。

网页的文字太普通?那就给她加个描边效果

早期在Web中要实现文本描边效果是没有直接的CSS属性可以实现的。一般都是通过其他的CSS属性来模拟需要的描边效果。最常见的就是使用text-shadow。

语法

text-stroke:<width><color>

text-stroke是一个复合属性,由text-stroke-width和text-stroke-color两个子属性组成,一般使用他的简写方法。

text-stroke-width:设置描边的宽度,可以为一般的长度值。

text-stroke-color:设置描边的颜色。

当然配合其他属性(text-fill-color属性是给文本填充颜色),则是可以做出更多文字效果。

案例

实现一个最简单的文字描边,只需要设置width和color

最简单的文字描边

代码设置

再来一个稍微复杂一点点点,只是加多个text-fill-color(文本填充颜色)和linear-gradient(背景渐变),就可以实现渐变文字。

渐变描边文字

渐变描边

在稍微延伸一下,只需要将背景图换成图片,还可以做出以图片为底的描边效果

图片描边文字

图片描边代码

总结

总结

相关问答

html怎么给文字加边框-懂得

设定样式如下:.font_bk{border:1pxsolid#ccc;}然后给你需要的文字设置样式即可,比如百度知道给你的文字块化然后加边框样式!~例子

PS怎么向图中添加边框和文字-ZOL问答

然后选择编辑菜单->描边如1像素即描边粗细在ps中,“给文字加上边框”的专业术语为:文字描边。文字描边的方法是:右键文字图层--混合选项--描边。如下图:...

ps字体描边肿么变细-ZOL问答

“描边”选项里可以直接调整描边粗细,范围是1-250,单位是像素。您好,按我的说法一步一步来:1,将你的文本图层右击,栅格化图层2,将你的颜色设置前景色为“黑色...

res屏幕描边怎么做?

要在res屏幕上添加描边,首先需要确定你使用的是什么软件或工具。通常情况下,可以通过在图层上使用描边工具来实现这一效果。在Photoshop等软件中,可以选择图...

ps给字体加白边来自肿么加-ZOL问答

打完字,点图层下面添加图层样式或者双击字体图层,出来添加样式调板,左面列表最正面一项是描边,摊贩颜色调成白色,描边大小看着调整就行了Photoshop软件可以通过...

ps中图层样式来自里怎么进行重复描边-ZOL问答

除了使用“混合选项”功能外,还可以通过调整画笔设置来实现对多个图层的重复描边效果。具体方法是先选中需要描边的多个图层,在顶部菜单栏选择“编辑->变换->缩...

在AI里边给字体描边后看起来字体可模糊,怎么才能让字体和描...

字体的话更新下版本就可以了,比如打上1.24e补丁试试进入后在选项里调整分辨率一、你是用的是ATI的显卡(HD5000/6000),最近升级了驱动,不小心开启了MLAA.二...

Photoshop用钢笔画笔描边快捷键是什么?_溜溜自学网

[回答]PS快捷键大全:保留当前图层的透明区域——【/】循环选择画笔——【[】或【]】显示复合通道——【~】删除锚点工具——【-】添加锚点工具——【...

CDR的字体描边后怎么再转曲变成加粗的转曲字体?-ZOL问答

你先复制一层,位置不要动,把复制的图层描边后,再转为“对象”,然后把两个图层“组合”就完成了5条回答:【推荐答案】我知道了,制作公司是刻字,刻字用到刻字机...

像这样带白边的字体是肿么弄的-ZOL问答

6条回答:选择编辑里面的描边,里面可以选择相应的颜色和宽度讨论回答(6)描边2次,但第2次描边前要先建个空图层(放下面)和文字图层合并。。选择编辑里面的描边...