CSS3文本阴影text-shadow属性详解

Shun

文本阴影text-shadow属性特效：
1.右下角阴影，左下角阴影，左上角阴影，右上角阴影

<!DOCTYPE html>  
  <html lang="en">  
  <head>  
    <meta charset="UTF-8">  
    <title>text-shadow</title>  
    <style>  
      p{   
        text-align:center;   
        margin:0;   
        font-family: helvetica,arial,sans-serif;   
        color:#999;   
        font-size:80px;   
        font-weight:bold;   
        text-shadow:10px 10px #333;   
      }   
    </style>  
  </head>  
  <body>  
    <p>Text Shadow</p>  
  </body>  
  </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设置立体文字效果

<!DOCTYPE html>  
   <html lang="en">  
   <head>  
     <meta charset="UTF-8">  
     <title>text-shadow</title>  
     <style>  
       p{   
         text-align:center;   
         margin:0;   
         font-family: helvetica,arial,sans-serif;   
         color:#999;   
         font-size:80px;   
         font-weight:bold;   
         text-shadow:-1px -1px #fff,   
                    1px 1px #333;   
       }   
     </style>  
   </head>  
   <body>  
     <p>Text Shadow</p>  
   </body>  
   </html>

以上这篇CSS3文本阴影text-shadow属性详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持CodeAE代码之家。

[Html/CSS] CSS3文本阴影text-shadow属性详解

相关帖子

桌面阴影去掉方法

retina显示屏的好处详解

机器学习服务文本翻译能力升级，中文直译模型让译文表达更地道！

详解 SSL（三）：SSL 证书该如何选择？

css3超酷的按钮鼠标经过特效

利用CSS换变文本选中后的颜色

H5+JS+CSS3实现七夕言情源码分享

好看的CSS3滑动按钮特效

CSS3荧光灯文字闪烁动画特效

css3怎样设置子元素居中的方法

Shun LV3