CSS3新特性预览:文本阴影(Text-shadow)

1. Text-shadow, Photoshop like effects using CSS

CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows:

text-shadow: 2px 2px 2px #000;

This produces the following text with a shadow 2px right and below of the text, which blurs for 2px:

如果你是使用Webkit (from Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror 你会看到这是一段酷似PHOTOSHOP投影效果的带阴影文字.

如果你看不到这个效果，下面是使用Opera 9.5浏览器的解图:

Note: This feature is NOT new in CSS3; it was originally proposed in CSS2. Safari had it from version 1, however!

The following works in Opera, Konqueror, iCab and Firefox 3.1a, and looks really cool (or, rather, the opposite!):

如果看不到，下面是解图: