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. python之GIL理解

    GIL(Global Interpreter Lock) 全局解释器锁 python3中是假的多线程,它不是真正的并行,是利用了cpu上下文的切换而已.同一时间只能有一个线程使用共享数据,其它线程处于 ...

  2. 剑指offer——滑动窗口的最大值

    给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值分别为{4,4,6,6,6, ...

  3. 强化学习算法DQN

    1 DQN的引入 由于q_learning算法是一直更新一张q_table,在场景复杂的情况下,q_table就会大到内存处理的极限,而且在当时深度学习的火热,有人就会想到能不能将从深度学习中借鉴方法 ...

  4. PAT甲题题解-1064. Complete Binary Search Tree (30)-中序和层次遍历,水

    由于是满二叉树,用数组既可以表示父节点是i,则左孩子是2*i,右孩子是2*i+1另外根据二分搜索树的性质,中序遍历恰好是从小到大排序因此先中序遍历填充节点对应的值,然后再层次遍历输出即可. 又是一道遍 ...

  5. 『编程题全队』Alpha 阶段冲刺博客Day7

    1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威: 1.添加了网络通信管理类 2.稍微修改了燃尽图模块ChartWidget 3.在主窗口中添加了用户信息框 4.重构了项目中的文件结 ...

  6. 善用Eclipse的代码模板功能

    转载自: 善用Eclipse的代码模板功能 Eclipse是个非常强大的IDE,作为一个JAVA程序员,几乎每天都与它打交道,但是它强大的功能都用到了吗? 今天让我们来看一下Eclipse中的“代码模 ...

  7. Python [练习题] :字典扁平化

    习题:将source字典扁平化,输出为 target 格式的字典.source = {'a': {'b': 1, 'c': 2}, 'd': {'e': 3, 'f': {'g': 4}}}targe ...

  8. chrome-extension & inject.js

    chrome-extension & inject.js chrome-extension://gppongmhjkpfnbhagpmjfkannfbllamg/js/inject.js in ...

  9. 如何在主Form出现之前,弹出密码验证From,Cancel就退出程序,Ok后密码正确才出现主Form

    如何在主Form出现之前,弹出密码验证From,Cancel就退出程序,Ok后密码正确才出现主Form本文地址 :CodeGo.net/5175478/ ----------------------- ...

  10. sqlserver 比较两个表的列

    一.问题 给了两个各有四五十个列的表,找出他们相同的列和不同的列 二.查询两个表的列,存在临时表 --#a ,#b都是临时表,当前连接断开后自动删除--RANK() OVER (ORDER BY sy ...