`
yxgblog
  • 浏览: 37468 次
  • 性别: Icon_minigender_2
  • 来自: 郑州
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS3中的text-shadow属性：文字阴影

 
阅读更多

经常会看到页面中文字阴影的效果，觉得很漂亮，一般做这样的效果都是用图片显示的，现在通过定义样式就可以完成此效果。

接下来看看text-shadow的语法:

text-shadow:color length length length;

color:颜色; length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径”
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.其中任意一个值可以为零也可为空(将做默认处理)

 

举个例子:

text-shadow: -1px 2px 3px #ffb69a;

表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a

分享到：
| 七招帮你提高网页设计水平
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS3文字阴影text-shadow属性代码示例

    text-shadow 给文字设置阴影的属性 text-shadow: 1px 2px 3px red; 1px表示X轴偏移量（取值范围负数~正数，负数阴影在左，正数阴影在右），2px表示Y轴偏移量，3px表示模糊度(数值越大越模糊，该数值不能为负值) ...

    HTML5 CSS3 text-shadow 文字阴影立体特效.rar

    HTML5 CSS3 text-shadow 文字阴影立体特效，prefixfree.min.js插件和jquery配合实现的文字特效，使用时只需定义需要显示阴影的文字即可，页面打开后会自动生成阴影文字，测试时请使用支持HTML5内核的浏览器。

    利用CSS3的text-shadow属性设计网页艺术字特效

    利用CSS3新增的text-shadow属性可以生成文本阴影，在HTML文档中实现多重阴影特效、火焰特效、发光特效、凸起和镶嵌特效、描边特效和阴影特效的艺术字效果，大大提高开发效率，无需链接图片文件，节约带宽。

    CSS3利用text-shadow属性实现多种效果的文字样式展现方法

    利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果，因此可以替换掉之前使用过的一些繁琐的图片。到目前为止Safari、FireFox、Chrome和Opera等主流浏览器都支持该功能。 二、介绍CSS3的 text-shadow属性...

    举例详解CSS中的text-shadow文字阴影效果使用

    text-shadow 语法 CSS Code复制内容到剪贴板 text-shadow: h-shadow v-shadow blur color;  实例 基础的文本阴影效果： CSS Code复制内容到剪贴板 { text-shadow: 5px 5px 5px #FF0000; }  Eg: CSS ...

    用CSS的text-shadow制作超炫文字效果全攻略

    text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。text-shadow 和 box-shadow 的不同之处： box-shadow语法： CSS ...

    CSS text-shadow属性

    也就是CSS中的text-shadow属性.所以今天我整理了一些资料,希望可以对大家有所启发. 首先我们看看wordpress 2.8后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的. text-...

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

    CSS3设置文字阴影效果，对文字字体设置阴影效果，采用text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。 CSS3单词与语法 CSS3单词： text-shadow...

    CSS巧用text-shadow做图片阴影（小小研究版）

    NULL 博文链接：https://caiceclb.iteye.com/blog/426970

    CSS3的文字阴影—text-shadow的使用方法

    前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法，这几次继续整理了有关于CSS3的text-shadow的使用方法,需要了解的朋友可以详细参考下

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

    文本阴影text-shadow属性特效： 1.右下角阴影，左下角阴影，左上角阴影，右上角阴影 XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>  <html lang="en">  <head>  <meta charset="UTF-8...

    详解CSS3阴影 box-shadow的使用和技巧总结

    本文讲诉了CSS3阴影 box-shadow的使用和技巧，具体如下： text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及，这一特殊效果使用越来越普遍。 基本语法是{box-shadow:...

    IE下实现类似CSS3 text-shadow文字阴影的几种方法

    果然，正如网上所传言的一样，IE9浏览器确实不支持CSS3 text-shadow属性，且根据最近的IE10 preview版的反馈，IE10浏览器也是不支持text-shadow属性的。至于为何不支持，就像女孩的心思一样，我也是百思不得其解。 ...

    CSS3实现千变万化的文字阴影text-shadow效果设计

    主要介绍了CSS3实现千变万化的文字阴影text-shadow效果设计的相关资料，感兴趣的小伙伴们可以参考一下

    tenue-css3-text-effect:细腻CSS3文字阴影效果

    Tenue CSS text-shadow效果受此版本启发，基于css text-shadow的微妙效果。 该效果通过阴影和光的混合产生了非常优雅和令人惊叹的效果。 您可以轻松使用自己的文本，然后编辑效果使其成为您自己的文本。用法和自定义...

Magicbox
Global site tag (gtag.js) - Google Analytics