Move me

  • 首页
  • About
    • History
  • 技术与技巧
    • 编程
    • 软件
  • ACG
    • 动画欣赏
    • 游戏
  • 随笔
    • 诗赋
    • 观点
    • 吐槽
  • 文章存档
  • 友情链接
Move me
My footprint on web
  1. 首页
  2. 技术与技巧
  3. 编程
  4. 正文

CSS实现文字阴影

2011年10月27日 18583次阅读 1人点赞 1条评论

想在自己博客的首页的抬头图片上添加一句引言,结果发现在很多色调复杂的图片上几乎看不见于是就找了运用CSS实现文字阴影效果的属性,就是text-shadow。

text-shadow是什么?

text-shadow早在CSS2中已经存在,而现在CSS3也准备将他加入其中。并且由于一直以来只有Safari支持这个属性所以我们很少见到真正的应用,直到最近Firefox 3.5对它的支持然重新唤起了人们对它的兴趣。

text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片。
目前支持的浏览器包括Firefox,Safari,Opera,chrome等,基本上不太旧的都可以(数据可能有偏差)。当然IE家族是无法支持的。

text-shadow的语法:

text-shadow:color length length length;

color:颜色;

length分别按顺序指“X轴方向长度 Y轴方向长度 阴影模糊半径”
正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.其中任意一个值可以为零也可为空(将做默认处理)

举个例子:

text-shadow: -1px 2px 3px #ffb69a;

表示X轴方向阴影向左1px,Y轴方向阴影向下2px,而阴影模糊半径3px,颜色为 #ffb69a

<图找不到了,哭哭>

以下代码实现如上图所示的效果,背景无视之:

text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, 2px -15px 11px #FF8800, 2px -25px 18px #FF2200; color:#000; 
标签: 暂无
最后更新:2015年8月30日

一树小草

这个人很懒,什么都没留下

点赞
下一篇 >

文章评论

  • 一树小草

    回来考古,顺便怀旧,嗯嗯。

    2014年8月28日
    回复
  • 取消回复

    公告

    终于能正常访问了,希望这次能撑得久一点。

    ——2021.11.04

    普通的有机生命体;

    beta版的智人

    总是跳过OP、ED的坏孩子;

    有自知之明的变态

    COPYRIGHT © 2021 spdf.me. ALL RIGHTS RESERVED.

    Theme Kratos by Seaton Jiang. PJAX fork by 小白-白.