html 空心字 以及部分艺术字

前几天做demo 的时候，遇到了一个需求，就是写一个空心字。想了半天没招，就弄了 网上的资源。

现在想想，加上查资料，感觉还是能实现的

空心字主要使用了 css3 的  text-shadow

效果大概是这样的

上代码：

< style >

. font > p {

font-size : 40 px ;

text-shadow: 0 0 2px black; // 使用了 字体阴影，然后把字体颜色调成背景颜色，就是空心字了

color : white ;

}

< / style >

// 这里用到了一些很有意思的标签，有些是以前就知道的，有些是刚知道的，看上面的效果

< div class = " font " >

< p >

< i > i你猜 i >< br > // 斜体

< span > span猜不猜 span >< br > // 这个就不需要介绍了

< strong > strong不猜 strong >< br > // 重要文本，也是粗体，和 b 标签的区别可以去查一查

< b > b猜 b >< br > // 粗体

< u > u猜 u >< br > // 下划线

< big > big猜 big >< br > // 大号字体

< small > small猜 small >< br > // 小号字体

< strike > strike猜 strike > // 删除线

p >

div >

. font2 > p {

font-size : 40 px ;

text-shadow : 5 px 5 px 5 px black ;

color : red ;

}

< div class = " font2 " >

< p >

< i >艺术字 i >

p >

div >

没想到吧，还能有空心的 艺术字

. font3 > p {

font-size : 40 px ;

text-shadow : 5 px 5 px 5 px black , 0 px 0 px 2 px black ; // 没错这里设置了两个 shadow

color : white ;

}

< div class = " font3 " >

< p >

< i >艺术字 i >

p >

div >

这个已经基本上接近 办公软件的 艺术字了吧

. font4 > p {

font-size : 40 px ;

text-shadow : 5 px 5 px 5 px black , 0 px 0 px 2 px red , 2 px 2 px 3 px green ;

}

< div class = " font4 " >

< p >

< i >艺术字 i >

p >

div >

还有很多有趣的组合，那些标签也可以一个套一个，可以玩很久的样子。(*^▽^*)