CSS3 text

日期：2021-03-04 类型：科技新闻 

关键词：自助建站免费建站平台，网站的建设服务，自助建站平台，如何自己建网站，怎么建设网站

CSS3设定文本黑影实际效果，对文本字体样式设定黑影实际效果，选用text-shadow款式，原本在CSS2版本号中也是有此特性，但在CSS3汉语字黑影text-shadow再度被运用，丰富多彩文本排版合理布局清理实际效果。

CSS3单词与英语的语法

CSS3单词： text-shadow

英语的语法构造：text-shadow: 5px 2px 6px black;

5px 意味着着：黑影间距文本左5px显示信息
2px 意味着着：黑影间距文本上2px显示信息
6px 意味着着：黑影尺寸范畴
black 意味着着：黑影色调为黑色

事例：

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf⑻">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.     .All-orange {   
  8.         font: normal 14px 微软雅黑,sans-serif;   
  9.         max-width: auto;   
  10.         max-height: auto;   
  11.         background-color: #f8f8f8;   
  12.         padding: 30px 30px 20px 30px;   
  13.         color: #666;   
  14.         border-radius: 5px   
  15.     }   
  16.     .All-orange h1 {   
  17.         font: normal 32px 微软雅黑,sans-serif;   
  18.         padding: 20px 0 20px 40px;   
  19.         display: block;   
  20.         margin: ⑶0px ⑶0px 10px ⑶0px;   
  21.         color: #FFF;   
  22.         background-color: #0CF;   
  23.         border-radius: 5px;   
  24.         text-shadow:5px 2px 6px #000;   
  25.         box-shadow: 5px 2px 6px #000;   
  26.     }   
  27.     .All-orange img {   
  28.         float: left   
  29.     }   
  30.     .All-orange h1 img{   
  31.         margin-top: ⑴5px;   
  32.     }   
  33.     </style>  
  34. </head>  
  35. <body>  
  36.     <div class="All-orange" id="all">  
  37.     <h1><img src="../img/launcher_icon_.png" />  
  38.         忧伤黑与白棋   
  39.     </h1>  
  40.    </div>  
  41. </body>  
  42. </html>  

实际效果图：

访问器适配

此特性为CSS3款式IE9以上版本号访问器适用、谷歌访问器适用。

以上便是运用CSS3 text-shadow完成的文本黑影实际效果，期待对大伙儿的学习培训有一定的协助。

上一篇：根据CSS制做天蓝色导航栏菜单 返回下一篇：没有了