巅云智能建站平台搭建版(创业门户版)火爆上线,终身授权!新增:文章智能采集+全站真静态打包+城市分站+智能小程序+非法词过滤+H5自适应+智能链词等功能功能详情
帮助文档Help

CSS3 text-shadow实现文字阴影效果

一佰互联网站制作(www.yinxi.net) 发布日期 2019-04-21 17:24:57 浏览数: 101

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-8">  
  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: -30px -30px 10px -30px;   
  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: -15px;   
  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实现的文字阴影效果,希望对大家的学习有所帮助。

一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

相关新闻more

04
01月
高端网站建设公司告诉你网站建设的重要意义有哪

162016/10 高端网站建设公司告诉你网站建设的重要意义有哪些 高端网站建设公司非常的多,很多企业还没有充分的... >>详情

22
04月
Docker容器应用日志查看方法

docker attach命令docker attach [options] 容器会连接到正在运行的容器,然后将容器的标准输入、输出和错误流... >>详情

17
05月
精准剖析日本网站设计风格并配有案例解析-ww

window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":... >>详情

26
03月
交互电影游戏,从未想过如此的沉浸!

简介:人工智能的发展,使我们相信终究会有那么一天,机器人将和人类一样拥有自己的人格、自己的感情和思维。他们将在这个世界中扮演一定的角色,或者... >>详情

高端网站建设

美工兼顾SEO,为企业电子商务营销助力!

电话:

023-85725751
建站

产品

域名注册 虚拟主机 云服务器 企业邮局
智能建站 APP打包 微站/小程序 创业平台
网站推广 媒体营销 智能采集 AI机器人
400电话 短信营销 店销机器人
私人定制 门户网站