你的位置:首页 > 网页设计

[网页设计]CSS3 一、文本阴影text


文本阴影text-shadow属性特效:

1.右下角阴影,左下角阴影,左上角阴影,右上角阴影

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4   <meta charset="UTF-8"> 5   <title>text-shadow</title> 6   <style> 7     p{ 8      text-align:center; 9      margin:0;10      font-family: helvetica,arial,sans-serif;11      color:#999;12      font-size:80px;13      font-weight:bold;14      text-shadow:10px 10px #333;15     }16   </style>17 </head>18 <body>19   <p>Text Shadow</p>20 </body>21 </html>    

文字效果为:

如果将text-shadow改成:text-shadow:-10px 10px #333 ,就将出现左下角阴影

     将text-shadow改成:text-shadow:-10px -10px #333 , 就将出现左上角阴影

     将text-shadow改成:text-shadow: 10px -10px #333 , 就将出现右上角阴影

2.使用text-shadow设置立体文字效果

 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <head> 4 4   <meta charset="UTF-8"> 5 5   <title>text-shadow</title> 6 6   <style> 7  7     p{ 8  8      text-align:center; 9  9      margin:0;10 10      font-family: helvetica,arial,sans-serif;11 11      color:#999;12 12      font-size:80px;13 13      font-weight:bold;14 14      text-shadow:-1px -1px #fff,15                   1px 1px #333;16 15     }17 16   </style>18 17 </head>19 18 <body>20 19   <p>Text Shadow</p>21 20 </body>22 21 </html>