CSS实现立体字效果

最新推荐文章于 2024-09-19 14:11:58 发布

zetao1988

最新推荐文章于 2024-09-19 14:11:58 发布

阅读量2.1k

点赞数

文章标签： css xhtml class html

本文链接：https://blog.csdn.net/zetao1988/article/details/6552188

版权

不用滤镜，不用图片，用纯CSS实现立体字效果.

效果如下：

让我们先来看一下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{background:#999; font-size:9pt;} .front{ position:absolute; top:1px; left:0; color:#fff; }</style> </head> <body> <div style="color:#fff" mce_style="color:#fff">没有任何效果(参照)</div> <br /> <div style="position:relative" mce_style="position:relative"> <span class="front">立体字123font(文字阴影效果)</span> <span class="back">立体字123font(文字阴影效果)</span> </div> </body> </html>

原理很简单，两行相同文字，在垂直方向进行了一个像素的位移，利用高对比颜色产生逼真的阴影效果。

这项技术在苹果的官方网站上使用很广泛。

效果如下：