如何利用DIV+CSS 2.0实现文字阴影-平面设计-菜鸟图库

如何利用DIV+CSS 2.0实现文字阴影

2022-02-28
来源/作者： adobe-dreamweaver.cn / adobe-dr…
1 次浏览

用符合标准的DIV+CSS 2.0的方式来实现一个文件阴影效果。

这个效果的兼容性还是不错的。

* Firefox 2.0.0.4
* Internet Explorer 6.0
* Mozilla 1.7.13
* Opera 9.21
* Netscape 8.0.4

该效果以上的所有浏览器。

在贴代码之前大家先这里看看效果。

Text with shadow using CSS Text with shadow using CSS

html, body { margin: 0px; padding: 0px; } body { background-color: #DDDFD7; font-family: Verdana, Arial, sans-serif; font-size: 11px; text-align: center; } #wrapper { width: 700px; height: 200px; margin: 20px auto 20px auto; padding: 0px; text-align: left; position: relative; border: solid 1px #fff; } .firstlayer { font-size: 18px; font-weight: bold; color: #fff; position: absolute; top: 20px; left: 20px; z-index: 1; } .secondlayer { font-size: 18px; font-weight: bold; color: #aaa; position: absolute; top: 22px; left: 22px; z-index: 0; }

如何利用DIV+CSS 2.0实现文字阴影

更多精彩内容