我们经常在网上看到一些炫酷的字体特效，像这样：

 

 

你以为这个很难吗？有的同学（我以前也这样），这时候只能可怜巴巴的求助设计小姐姐了。。。

悄悄告诉你，这些都是可以代码实现的！就是那几个css属性，只不过你没有研究一下罢了。。。

这几个css属性名字叫做：text-shadow、-webkit-text-fill-color、text-stroke、-webkit-background-clip、background-image。

text-shadow：基础的文本阴影效果

-webkit-text-fill-color：指定文字的填充颜色

text-stroke：复合属性。设置或检索对象中的文字的描边

-webkit-background-clip：规定背景的绘制区域

background-image：字体填充色透明情况下，设置字体的背景图片

具体用法，百度一下有不少文章了。

什么？你嫌麻烦不想去研究这几个平时用不到的属性？？？

再悄悄告诉你，有个东西叫“字体转换器”，搜一下网上有不少，在这里我推荐自己用的一款：字体转换器

有30种特效可以选择：

 

 

还可以自己选择文字、字体、字体大小、字体颜色、背景颜色：

 

最关键的是。。。点击“下载图片”，可以免费下载，网上的字体转换器几乎都是收费的。。。

 

那这还是图片啊，说好的代码实现呢？别急。。。

F12打开开发者工具，选中一个字体特效，想要哪个就选中哪个，直接copy它的css代码。。。

 

 

大功告成！