Text Shadow Text-shadow Property effects:
1. Lower right corner shadow, lower left corner shadow, upper left corner shadow, upper right corner shadow
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Text-shadow</title>6 <style>7 P{8 text-align:Center;9 margin:0;Ten font-family:Helvetica,arial,sans-serif; One Color:#999; A font-size:80px; - Font-weight:Bold; - Text-shadow:10px 10px #333; the } - </style> - </Head> - <Body> + <P>Text Shadow</P> - </Body> + </HTML>
The text effect is:
If you change the Text-shadow to: text-shadow:-10px 10px #333, the lower left shadow will appear
Change the Text-shadow to: text-shadow:-10px-10px #333, the upper left corner of the shadow will appear
Change the Text-shadow to: text-shadow:10px-10px #333, the upper right corner of the shadow will appear
2. Use Text-shadow to set the stereo text effect
1 <!DOCTYPE HTML>22<HTMLLang= "en">33<Head>44<MetaCharSet= "UTF-8">55<title>Text-shadow</title>66<style>7 7 p{8 8 Text-align:Center;9 9 Margin:0;Ten Ten font-family:Helvetica,arial,sans-serif; One One color:#999; A font-size:80px; - Font-weight:Bold; - Text-shadow:-1px-1px #fff, the 1px 1px #333; - the} - -</style> -17</Head> +18<Body> -19<P>Text Shadow</P> +20</Body> A21st</HTML>
CSS3. Text Shadow Text-shadow Properties