text-shadow还没有出现的时候,大家在网页中的阴影就是用ps一张图片作为背景。那么现在有了CSS3的这个属性,日后我们的工作会更简洁些。

text-shadow之前出现过,不过不久就被Pass了,现在又重新返回来,也算是我们的福利了。这个属性被使用的还是非常广泛的,虽然我不是很喜欢,美学能力太差,但它做出来的效果确实很多我还是很喜欢的,毕竟img出来的性能上有那么一丢对的不可观。

语法:

text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
也就是:
text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...
或者
text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...

取值:

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

  • :指定阴影颜色,也可以是rgba透明色

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

例如: text-shadow: 2px 3px 2px #000;

可以给一个对象应用一组或多组阴影效果

text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离,其值为正值时阴影向右偏移,如果其值为负值时,阴影向左偏移;Y-Offset是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移反之其值是负值时阴影向顶部偏移;Blur是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;Color是指阴影的颜色,其可以使用rgba色。

参考网址A

CSS-3 文字阴影—text-shadow 的使用的更多相关文章

  1. 酷炫,用Html5/CSS实现文字阴影

    前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...

  2. CSS实现文字阴影的效果

    CSS中有两种阴影效果,一种是DropShadow(投影),另一种是Shadow(阴影).1.DropShadow语法:{FILTER:DropShadow(Color=color,OffX=offX ...

  3. android:text 文字阴影设置

    <SPAN style="FONT-SIZE: 16px"><TextView  android:id="@+id/text"       a ...

  4. css学习_css文字阴影、盒子阴影

    文字阴影和盒子阴影的用法: 多阴影

  5. CSS学习笔记-盒子阴影及文字阴影

    盒子阴影:    1.格式:        box-shadow:h-shadow v-shadow blur spread color insert;        box-shadow:水平偏移 ...

  6. CSS3+HTML5实现块阴影与文字阴影

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...

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

    IE下实现类似CSS3 text-shadow文字阴影的几种方法 一.开始的擦边话 为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了.果然,正如网上所传言的一样,IE9浏览器确实不支持C ...

  8. Button 在布局文件中定义监听器,文字阴影,自定义图片,代码绘制样式,添加音效的方法

    1.Button自己在xml文件中绑定监听器 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro ...

  9. CSS3总结三:文字(text)/字体、文本、文本装饰、多列

    Text-Decoration text-shadow text-decoration Font font font-face Text 常用Text属性 Multi-column Multi-col ...

  10. css实现动态阴影、蚀刻文本、渐变文本

    css实现动态阴影 创建与类似的阴影box-shadow 而是基于元素本身的颜色. 代码实现: <div class="dynamic-shadow-parent"> ...

随机推荐

  1. Spark RDD深度解析-RDD计算流程

    Spark RDD深度解析-RDD计算流程 摘要  RDD(Resilient Distributed Datasets)是Spark的核心数据结构,所有数据计算操作均基于该结构进行,包括Spark ...

  2. 基于skip-gram做推荐系统的想法

    一.人工智能之自然语言处理 自然语言处理(Natural Language Processing, NLP),是人工智能的分支科学,意图是使计算机具备处理人类语言的能力. “处理人类语言的能力”要达到 ...

  3. 12.19daily_scrum

    本阶段已经过去一半,在周末短暂的休息后,我们将继续完成后续的任务,今日工作情况如下: 小组成员 今日任务 工作时间 李睿琦 网络数据传输应用设计 2 左少辉 主界面功能测试 3 程刚 界面优化学习 4 ...

  4. 软件工程之四则运算--Github

    由于现在配置问题,然后借用同学电脑将代码上传至Github,网址为:https://github.com/be821/RealFour 参考相关Github文档: 1. http://my.oschi ...

  5. SpringMVC(三)-- springmvc的系统学习之数据的处理,乱码及restful

    资源:尚学堂 邹波 springmvc框架视频 一.提交数据的处理 1.提交的域名称和处理方法的参数一致 (1)提交的数据:http://localhost:8080/data/hello.do?na ...

  6. 单片机内程序运行的时候ram空间是如何分配的?

    转自:http://blog.sina.com.cn/s/blog_a575eb9401014tam.html 单片机内程序运行的时候ram空间是如何分配的?我现对一个程序进行减少片内ram的使用的优 ...

  7. squid介绍和作用

    介绍 squid服务程序是一款在Unix系统中最为流行的高性能代理服务软件,通常会被当作网站的前置缓存服务,用于替代用户向网站服务器请求页面数据并进行缓存,通俗来讲,Squid服务程序会接收用户的请求 ...

  8. servlet编码乱码问题

    继承HttpServlet 重写doGet(HttpServletRequest req,HttpServletResponse resp),doPost()方法 post提交时: protected ...

  9. OneZero第五次站立会议(2016.3.25)

    会议时间:2016年3月25日 12:45~12:57 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论,确定会后修改内容. 会议内容:1.界面原型已经确定.(夏负责) 2 ...

  10. 六大Web负载均衡原理与实现

    还有个姊妹篇也可以参考这个文章:LVS(Linus Virtual Server):三种负载均衡方式比较+另三种负载均衡方式, LVS 实现了负载均衡,NAT,DR,TUN zookeeper使用ZA ...