首页 > 开发 > CSS > 正文

用CSS的text-shadow制作超炫文字效果全攻略

2024-07-11 08:29:54
字体:
来源:转载
供稿:网友

CSS3 Shadows浏览器支持情况

text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。
text-shadow 和 box-shadow 的不同之处:
2015723164206126.png (576×179)

box-shadow语法:

CSS Code复制内容到剪贴板
  1. box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;  

text-shadow语法:

CSS Code复制内容到剪贴板
  1. text-shadow: h-shadow v-shadow blur color|none|initial|inherit;  

这里只有几个不同点:

    不能为文本创建一个内阴影
    有文字阴影没有扩散距离

但是可以创建多个阴影(显示在彼此的顶部)。
text-shadow学习
color 和 offsets

在下面的例子中,我们定义了水平和垂直偏移和自定义颜色
2015723164300871.png (539×360)

CSS Code复制内容到剪贴板
  1. text-shadow:10px 10px;      
  2. text-shadow:-5px -5px; color:blue;      
  3. text-shadow:-1px -1px white; color:blue; background:#888;      
  4. text-shadow:1px 1px rgba(255,255,255, 0.5); color:blue; background:#eee;  

注意,正值使阴影往右/下移动,负值往左/上移动

阴影的颜色是可选的,如果颜色没填,就使用从父级继承的颜色。然而,在不同的浏览器下可能会有所不同,所以我建议定义颜色项(RGB或RGBA和HSLA等)。
blur

在下面的例子中,我们定义了各种模糊:
2015723164322585.png (539×329)

模糊是可选的参数,它定义了距离模糊。它应该是一个正数(因为0意味着没有模糊)。下面的图片,说明它是如何工作的:
2015723164343601.png (394×280)

CSS Code复制内容到剪贴板
  1. element {      text-shadow:5px 5px 3px darkred; color:red;   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表