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

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

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

本文主要包含文字阴影,text-shadow等相关知识,佚名 希望在学习及工作中可以帮助到您

前段时间整理了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,如果模糊值越大,其效果越糊糊;其二,我们不设置任何方向的偏移值。如果结合前面的photoshop

emboss效果,可以让你等到不同的效果。提醒一下opera浏览器不支持这个效果。

我

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

  • CSS3实现千变万化的文字阴影text-shadow效果设计
  • CSS3 text-shadow实现文字阴影效果
  • CSS3的文字阴影—text-shadow的使用方法
  • IE下实现类似CSS3 text-shadow文字阴影的几种方法

相关文章

  • 2017-08-06css 解决英文字符与阿位伯数字自动换行
  • 2017-08-06CSS中的几个伪元素使用介绍
  • 2017-08-06IE overflow:hidden失效的解决方法
  • 2017-08-06深入探究CSS中Animations和Transitions的工作原理
  • 2017-08-06CSS Sprite打造的个性化导航菜单代码
  • 2017-08-06CSS div布局需要注意的两点
  • 2017-08-06部分透明的蒙版效果实现思路(兼容ie6)
  • 2017-08-06css中position:fixed实现div在窗口上下左右居中
  • 2017-08-06CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
  • 2017-08-06css在不同浏览器中的唯一标识以height属性为例

文章分类

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

最近更新的内容

    • css firefox火狐浏览器下的兼容性问题
    • css实现文字图片垂直居中效果
    • CSS3 display知识详解
    • firebug使用方法 在IE上使用firebug的技巧图文介绍
    • CSS 面向对象CSS FAQ
    • 网页设计经验谈:常用的网页设计工具的收集介绍
    • Visual Foxpro 6.0 中文版安装向导(图解)
    • DIV+CSS通用样式布局实例代码
    • div背景半透明 覆盖整个可视区域的遮罩层效果
    • IE对CSS样式的数量和大小是有限制的

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

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