分享好友 前端技术首页 频道列表

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

css教程  2016-03-12 13:420

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 text-shadow实现文字阴影效果

浏览器兼容

此属性为CSS3样式IE9以上版本浏览器支持、谷歌浏览器支持。

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

以上就是利用CSS3 text-shadow实现的文字阴影效果，希望对大家的学习有所帮助。

查看更多关于【css教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
CSS3中的px,em,rem,vh,vw辨析 css3 vw
1、px：像素，精确显示2、em：继承父类字体的大小，相当于“倍”，如：浏览器默认字体大小为16px=1em，始终按照div继承来的字体大小显示，进场用于移动端          em换算工具：http://www.runoob.com/tags/ref-pxtoemconversion.html3、rem：与em类似，

0评论2023-03-08902

CSS3 Flexbox轻松实现元素的水平居中和垂直居中
CSS3 Flexbox轻松实现元素的水平居中和垂直居中网上有很多关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，赶上新技术，下面我就把这种布局叫Fl

0评论2023-03-08774

css3多行文本溢出显示省略号… css3行超出省略号
.title {width: rem(210);overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

0评论2023-03-08638

css3新增特性 css 3新增特性
 1、CSS3选择器2、CSS3边框(Borders)3、CSS3背景4、CSS3渐变5、CSS3文本效果6、CSS3字体7、CSS3转换和变形1）2D转换方法2）3D转换属性8、CSS3过度9、CSS3动画10、CSS3多列11、CSS3盒模型12、CSS3伸缩布局盒模型(弹性盒子)13、CSS3多媒体查询

0评论2023-03-08488

纯css3代码写九宫格效果 css九宫格 图片布局
主要用到css3中的transition和布局知识。代码如下1 !DOCTYPE html2 html lang="en"3 head4 meta charset="UTF-8"5 meta name=""6 title标题/title7 /head8 style type="text/css"9 *{margin: 0;padding: 0;} 10 body{background: url(images/bg.jpg);}

0评论2023-03-08797

css3动画 --- 网站背景图片渐变且切换
!DOCTYPE htmlhtmlheadmeta charset="utf-8"titleCSS3全屏背景图片缩小渐变自动切换代码/title!-- link rel="stylesheet prefetch" href="http://fonts.useso.com/css?family=Raleway:300" --style type="text/css"*{margin:0;padding:0;}.slideshow

0评论2023-03-08678

《图解CSS3》——笔记（一） css3知识点思维导图
作者：大漠勘误：http://www.w3cplus.com/book-comment.html2014年7月14日14:46:35第一章  揭开CSS3的面纱1.1  什么是CSS3CSS2.1是单一的规范,而CSS3被划分成几个模块组,每个模块组都有自己的规范.1.1.1  CSS3新特性1.强大的CSS3选择器2.抛弃图片的视觉效

0评论2023-03-08466

CSS3 Transform——transform-origin
在CSS2.1中，我们的页面都是静态的，网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的，比如说，如何实际移动一些元素？如何更改元素的外观——旋转或缩放？多年来，Web设计师为了给修改页面的外观，都依赖于图片、Flash或JavaSc

0评论2023-03-08931

css3的calc() css3的百分比减宽,减高,加,乘,除，适合用于后台的排版定位
css3的calc() css3的百分比减宽,减高,加,乘,除，适合用于后台的排版定位浏览器支持IE9+、FF4.0+、Chrome19+、Safari6+calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：.haorooms {width: calc(expressi

0评论2023-03-08575

更多推荐