• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    CSS3文本阴影text-shadow属性详解

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

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

    XML/HTML Code复制内容到剪贴板
    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设置立体文字效果

    XML/HTML Code复制内容到剪贴板
    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:-1px -1px #fff,   
    15.                                     1px 1px #333;   
    16.          }   
    17.      </style>  
    18.  </head>  
    19.  <body>  
    20.      <p>Text Shadow</p>  
    21.  </body>  
    22.  </html>  

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

    上一篇：浅谈语义化的HTML结构到底有什么好处
    下一篇：html页面公共样式(推荐)
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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