• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >css3 > CSS3的文字阴影—text-shadow的使用方法

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含css3文字阴影,css3阴影,css3阴影效果,css3边框阴影,css3内阴影等相关知识,佚名 希望在学习及工作中可以帮助到您

前段时间整理了CSS3中的渐变Gradient、透明度RGBA、边框圆角box-radius三个新属性的使用方法,这几次继续整理了有关于CSS3的text-shadow的使用方法。今天特意花了点时间贴上来与有共同爱好的朋友一起分享这个新属性的应用。

text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用,产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。

text-shadow曾经在css2中就出现过,但在css2.1版本中又被抛弃了,现在css3.0版本又重新捡回来了。这说明text-shadow这个属性非常值得我们做前端的人员重视。现在很多项目中,css3有很多属性被前端工程师们使用了,我在前面也分别介绍过css3中的渐变,透明度,圆角三个属性的使用,而且css3这么多属性中,我个人觉得text-shadow运用得是最多的一个属性,作为我们前端人员我觉得有必要学习并掌握这个text-shadow属性。

语法:

<length>:长度值,可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值,Y Offset是垂直偏移值

<color>:指定阴影颜色,也可以是rgba透明色

<shadow>:阴影的模糊值,不可以是负值,用来指定模糊效果的作用距离。

如下图所示:

说明:

可以给一个对象应用一组或多组阴影效果,方式如前面的语法显示一样,用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离,其值为正值时阴影向右偏移,如果其值为负值时,阴影向左偏移;Y-Offset是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移反之其值是负值时阴影向顶部偏移;Blur是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;Color是指阴影的颜色,其可以使用rgba色。

浏览器的兼容性:

我们来看个实例

首先给所有的DEMO一个公用的样式和类名:

效果是不错,可是让我们头痛的是IE是不支持text-shadow效果,但为了在兼容这一问题,我们只好使用滤镜filter:shadow来处理(本人不提倡使用滤镜)。filter:shadow滤镜作用与dropshadow类似,也能使用对象产生阴影效果,不同的是shadow可产生渐近效果,使用阴影更平滑实现。

滤镜语法:

我们先不管IE下的效果了,我个人认为text-shadow运用好了,也能像photoshop一样制作出非常好的效果,下面我这里罗列出一些比较好看的实例以供大家参考

注:下面所有的Demo需要加上这个公用的样式:

辉光效果,我们设置比较大的模糊半径来增加其辉光效果,你可以改变不同的模糊半径值来达到不同的效果,当然你也可以同时增加几个不同的半径值,创造多种不同的阴影效果。就如下面的NEON效果。

效果二:Apple Style Effect

效果三:Photoshop Emboss Effect
.demo5 {
  color: #ccc;
  text-shadow: -1px -1px 0 #fff,1px 1px 0 #333,1px 1px 0 #444;
}

效果二和效果三,我想用photoshop的朋友一定很熟悉,是不是很类似我们 photoshop中的投影和浮雕效果的呀。应用这两个效果大家一定要注意,其模糊值一定要设置为0,使文本不具有任何模糊效果,主要用来增加其质感,你也可以像photoshop中制作一样,改变不同的投光角度,从而制作出不同的效果,这里我就不举例子了,感兴趣的朋友可以自己尝试一下。

效果四:Blurytext Effect

用text-shadow制作模糊的效果主要要注意一点就是,把文本的前景色设置为透明transparent,如果模糊值越大,

您可能想查找下面的文章:

  • 利用CSS3实现的文字定时向上滚动
  • CSS3实现千变万化的文字阴影text-shadow效果设计
  • CSS3 text-shadow实现文字阴影效果
  • 利用纯css3实现的文字亮光特效的代码演示
  • CSS3的文字阴影—text-shadow的使用方法
  • CSS3中文字镂空、透明值、阴影效果设置示例小结

相关文章

  • 2017-06-02CSS3打造百度贴吧的3D翻牌效果示例
  • 2017-06-02CSS3轻松实现清新 Loading 效果的简单实例
  • 2017-06-02CSS3 制作绽放的莲花采用效果叠加实现
  • 2017-06-02超酷炫 CSS3垂直手风琴菜单
  • 2017-06-02css3圆角边框和边框阴影示例
  • 2017-06-02css3的过滤效果简单实例
  • 2017-06-02纯CSS3打造动感漂亮时尚的扇形菜单
  • 2017-06-02CSS3中使用RGBA设置透明度的示例
  • 2017-06-02CSS3区域模块region相关编写示例
  • 2017-06-02css3+伪元素实现鼠标移入时下划线向两边展开的效果

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 基于Jquery和Css3代码制作可以缩放的搜索框
    • CSS3弹性盒模型flex box快速入门心得(必看篇)
    • 使用css3制作动感导航条示例
    • 基于css3的属性transition制作菜单导航效果
    • 纯css3实现走马灯效果
    • css3让div随鼠标移动而抖动起来
    • 使用CSS3和Checkbox实现JQuery的一些效果
    • 利用纯css3实现的文字亮光特效的代码演示
    • CSS3弹性伸缩布局之box布局
    • css3圆角边框和边框阴影示例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有