css3 text-shadow属性学习

3442View0

css3属性text-shadow

css3文字阴影。

text-shadow: h-shadow v-shadow blur color;

h-shadowRequired. The position of the horizontal shadow. Negative values are allowedPlay it »
v-shadowRequired. The position of the vertical shadow. Negative values are allowedPlay it »
blurOptional. The blur distancePlay it »
colorOptional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values

第一个参数是水平移动距离的数值，即时文字的阴影偏离原来的文字水平方向位置。

第二个参数是竖直移动距离的数值，既是文字的阴影偏离原来的文字竖直方向的位置。

第三个是阴影的大小，既是文字的宽度，默认是原来的文字。

第四个则是阴影显示的颜色。默认是原来文字的颜色。

文章部分参考：http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

在线演示：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-shadow_blur

更多示例：http://www.w3.org/Style/Examples/007/text-shadow.en.html

, 推荐文章

  • css3背景颜色渐变属性

    尽管Mozilla和Webkit通常对CSS3属性采取同样的语法，但是对于渐变，他们很不幸的不能达成一致。Webkit是第一个支持渐变的浏览器内核，它使用下面的结构：

  • 一个简单的html表格自适应解决方案

    目前有很多智能的表格自适应解决方案。 他们分别是 flip the table on it’s side, convert it to a pie chart, gradually reduce the columns, allow use ...

  • CSS3弹性盒模型flexbox布局基础版

    最近看了社区上的一些关于flexbox的很多文章，感觉都没有我这篇文章实在，最重要的兼容性问题好多人都没有提出解决方案。另外本人还废寝忘食的翻译了国外的《CSS3弹性盒模型flexbox完整教程》和《CSS3弹性盒模型flexbox布局实例》，这么好的文章没有人来发现，实在是遗憾。

  • Flexbox布局详解

    Flexbox布局详解，本文详细的介绍了Flexbox弹性布局的各个属性，是新手学习Flexbox的一个较为完整的CSS教程，各个属性不仅有详细的使用说明，还给出了演示例子。

  • 纯CSS3制作TAB选项卡的两种方式

    css tab,纯CSS3制作tab,不用JavaScript就可以制作选项卡是不是很神奇，而且效果跟不适用jQuery是一个样的，本站独创的CSS3 Tab绝对让你眼前一亮。

原文：css3 text-shadow属性学习 ，未经许可，禁止转载。
来源：前端开发博客 (http://caibaojian.com/text-shadow.html)

相关文章