CSS3属性之三:text-shadow

语法:

text-shadownone | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*

相关属性 : 无

取值:

<color>
指定颜色。
<length>
由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
<opacity>
由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位。

说明:

设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果,方式是用逗号隔开。可以被用于伪类 :first-letter 和 :first-line 。对应的脚本特性为 textShadow 

  text-shadow是可以省略前缀的几个CSS属性之一,类似的还有box-shadow,它必须应用于文本,并它们有相同的四个参数:

  x-offset                水平位移

  y-offest                垂直位移

  blur                      模糊值

  color of shadow         阴影颜色

复制代码
h1 {

  text-shadow
: 0 1px 0 #fff ;

  color
: #292929 ;

}
复制代码

下面看实例:

复制代码
<!DOCTYPE html>
<html>
<head>
<title>text-shadow</title>
<meta charset="utf-8" />
<style>
body
{
  background-color
: #666 ;
}
h1
{
  text-shadow
: 0 1px 0 #fff ;
  color
: #292929 ;
  font
: bold 90px/100% Arial ;
  padding
: 50px ;
}
</style>
</head>
<body>

<h1>Hello,World!</h1>

</body>
</html>
复制代码

运行效果(Chrome):

下面用text-shadow实现空心字效果:

h1 {
  text-shadow
: 0 1px #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000 ;
  color
: #fff ;
  font
: bold 90px/100% Arial ;
}

运行效果(Chrome):


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值