CSS3 -- 文字阴影(text-shadow)

text-shadow在css2中就出现过,但在css2.1版本中又被抛弃了,现在css3.0版本又重新捡回来了。

它的作用,产生阴影和模糊主体。这样在不使用图片时能给文字增加质感。

1、text-shadow语法、取值

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)]...
取值:
<length>:长度值,可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值,Y Offset是垂直偏移值;
<color>:指定阴影颜色,也可以是rgba透明色;
<shadow>:阴影的模糊值,不可以是负值,用来指定模糊效果的作用距离。

2、text-shadow说明

说明:
可以给一个对象应用一组或多组阴影效果,方式如前面的语法显示一样,用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color;X-Offset表示阴影的水平偏移距离,其值为正值时阴影向右偏移,如果其值为负值时,阴影向左偏移;Y-Offset是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移反之其值是负值时阴影向顶部偏移;Blur是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0;Color是指阴影的颜色,其可以使用rgba色。

3、text-shadow兼容

===》IE是不支持text-shadow效果,(使用滤镜filter:shadow来处理)

  滤镜作用(不提倡滤镜)与dropshadow类似,也能使用对象产生阴影效果,不同的是shadow可产生渐近效果,使用阴影更平滑实现。

滤镜语法:  E {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}-------Color用于设定对象的阴影色;Direction用于设定投影的主向,取值为0即零度(表示向上方向),45为右上,90为右,135为右下,180为下方,225为左下方,270为左方,315为左上方;Strength就是强度,类似于text-shadow中的blur值。

4、text-shadow用法

  实例点击查看:待补充

整理自:(W3CPlus)CSS3的文字阴影—text-shadow

时间: 2024-12-09 19:59:00

CSS3 -- 文字阴影(text-shadow)的相关文章

Css3 文字阴影和盒子阴影

文字阴影text-shadow的使用方法 text-shadow: length  length  length  color; 前三个length分别表示 阴影离开文字的横方向距离(也就是X轴方向),阴影离开文字纵方向的距离 (即Y轴方向),阴影的模糊半径,color是指阴影的颜色 <div>专注前端</div> div{ font-size: 40px; text-shadow: 5px 5px 0 grey;} 专注前端 span{ font-size: 40px; text

IT兄弟连 HTML5教程 CSS3属性特效 文字阴影

文字阴影是可以叠加的.最基本可以给出四个值,用法如下: text-shadow:x y blur color 文字阴影的参数说明如表1所示. 表1  CSS3文字阴影参数说明 横向偏移量和纵向偏移量可以为负值,代表文字阴影向左偏移或向上偏移.文字阴影是可以叠加的,但是加很多层,会影响页面加载速度.添加多层阴影用“,”隔开.阴影叠加是先渲染前面的,再渲染后面的. 1.最简单的用法 text-shadow:2px 2px 4px #000; 此语法说明为一段文字设定横向偏移量为2px,纵向偏移量为2

CSS3的文字阴影—text-shadow

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3的文字阴影-text-shadow</title> <style> body{margin: 0;padding: 100px;} .example{ background: #666666; width: 440px; padding:

css3新增属性--文本新增样式文字阴影

文字阴影 最简单用法 h1{ font:100px/200px "微软雅黑"; text-align:center; color:#fff; text-shadow:2px 2px 4px #000;} 阴影叠加 text-shadow:2px 2px 0px red, 2px 2px 4px green; 先渲染后面的,再渲染前面的 几个好玩的例子 层叠 层叠:color:red; font-size:100px; font-weight:bold; text-shadow:2px

CSS3之阴影

CSS3中新增属性-阴影,可以做出很多漂亮的效果. 文字阴影text-shadow text-shadow属性值的顺序: text-shadow: h-shadow v-shadow blur color; 参数分别表示水平阴影位置,垂直阴影位置,模糊半径,阴影颜色. 一个栗子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3阴影</tit

纯CSS3文字效果推荐

之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究几款文字效果,主要利用text-shadow.webkit内核的几个独有特性实现效果. 在线研究单击这里,下载收藏单击这里. 效果1-立体字效果 我们的html文件貌似这样,为了更好的展示效果,我们加上了可编辑属性. <div contenteditable="true" class="text effect01">前端

Button 文字阴影,自定义图片,代码绘制样式,添加音效的方法

1.Button自己在xml文件中绑定监听器 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent&qu

酷炫,用Html5/CSS实现文字阴影

前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过于局限化,好了,闲话也不多说,咱们就先来看看这个文本阴影. 一.文字阴影text-shadow 文字阴影参数:参数1 : 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 参数2 :第2个长度值用来设置对象的阴影垂直偏移值.可以为负值 参数3 :如果提供了第3个长度值则用来设置对象的阴影模糊值.

jQuery+CSS3文字跑马灯特效

jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/texiao/jquery/83/ 效果图如下: 完整HTML代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http