首页 > 开发 > CSS > 正文

举例详解CSS中的text-shadow文字阴影效果使用

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

text-shadow

语法

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

实例

基础的文本阴影效果:

CSS Code复制内容到剪贴板
  1. {        text-shadow: 5px 5px 5px #FF0000;   
  2. }  

Eg:

CSS Code复制内容到剪贴板
  1. {text-shadow: h-shadow v-shadow blur color;}  

附:E即Element,元素的意思。

兼容IE的写法:

滤镜语法:

  Eg:  

CSS Code复制内容到剪贴板
  1. {filter:shadow(Color=颜色值,Direction=数值,Strength=数值)}  

Direction用于设定投影的主向,取值为0即零度(表示向上方向),45为右上,90为右,135为右下,180为下方,225为左下方,270为左方,315为左上方;Strength就是强度,类似于text-shadow中的blur值。

text-shadow的实例
 CSS代码:

CSS Code复制内容到剪贴板
  1. .demo {      background: #666666;   
  2.   width: 224px;      padding: 30px;   
  3.   font: bold 55px/100% "Lucida Sans";      color: #fff;   
  4.   text-transform: uppercase;      text-shadow: red 0 2px 0;   
  5. }  


HTML代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="demo">梦龙小站</div>  


预览效果:
2015819165534390.jpg (294×130)

例子2——改变阴影模糊半径

CSS代码:

CSS Code复制内容到剪贴板
  1. .demo {      background: #666666;   
  2.   width: 224px;      padding: 30px;   
  3.   font: bold 55px/100% "Lucida Sans";      color: #fff;   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表