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: 30px;

    font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;;

    color: #fff;

    text-transform: uppercase;

}

.example1{

    -webkit-text-shadow: red 0 0 10px;

    -moz-text-shadow: red 0 0 10px;

    -ms-text-shadow: red 0 0 10px;

    -o-text-shadow: red 0 0 10px;

    text-shadow: red 0 0 10px;

}

.example2{

    -webkit-text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de ;

    -moz-text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de ;

    -ms-text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de ;

    -o-text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de ;

    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de ;

}

.example3{

    color: #000;

    -webkit-text-shadow: 0 1px 1px #fff;

    -moz-text-shadow: 0 1px 1px #fff;

    -ms-text-shadow: 0 1px 1px #fff;

    -o-text-shadow: 0 1px 1px #fff;

    text-shadow: 0 1px 1px #fff;

}

.example4{

    color: #ccc;

    -webkit-text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333 , 1px 1px 0 #444;

    -moz-text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333 , 1px 1px 0 #444;

    -ms-text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333 , 1px 1px 0 #444;

    -o-text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333 , 1px 1px 0 #444;

    text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333 , 1px 1px 0 #444;

}

.example5{

    color: transparent;

    -webkit-text-shadow: 0 0 5px #f96;

    -moz-text-shadow: 0 0 5px #f96;

    -ms-text-shadow: 0 0 5px #f96;

    -o-text-shadow: 0 0 5px #f96;

    text-shadow: 0 0 5px #f96;

}

.example6{

    color: #fff;

    -webkit-text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);

    -moz-text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);

    -ms-text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);

    -o-text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);

    text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);

}

.example7{

    color: #eee;

    -webkit-text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;

    -moz-text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;

    -ms-text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;

    -o-text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;

    text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;

}

.example8{

    color: rgba(255,179,140,0.5);

    -webkit-text-shadow: 3px 3px 0 rgba(180,255,0,0.5);

    -moz-text-shadow: 3px 3px 0 rgba(180,255,0,0.5);

    -ms-text-shadow: 3px 3px 0 rgba(180,255,0,0.5);

    -o-text-shadow: 3px 3px 0 rgba(180,255,0,0.5);

    text-shadow: 3px 3px 0 rgba(180,255,0,0.5);

}

</style>

</head>

<body>

    <div class="example example1">text-shadow</div>

    <div class="example example2">text-shadow</div>

    <div class="example example3">text-shadow</div>

    <div class="example example4">text-shadow</div>

    <div class="example example5">text-shadow</div>

    <div class="example example6">text-shadow</div>

    <div class="example example7">text-shadow</div>

    <div class="example example8">text-shadow</div>

</body>

</html>

查看更多：http://www.w3cplus.com/blog/52.html

CSS3的文字阴影—text-shadow,布布扣,bubuko.com

时间： 2024-08-02 11:02:23

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

IE下类似css3 Text-shadow文字阴影的几种方法

一:ie9不支持css3的text-shadow属性: 二:glow滤镜下的文字阴影效果 Filter:glow(color=black,strength=5); 实现效果就是5像素扩散大小的黑色光晕.但是效果不经人意,当换成灰色时候就会有毛边. 三: MotionBlur的滤镜下的文字阴影效果     filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145); 用中文释义就是:145度方向上5像

CSS3的文字阴影—text-shadow—— W3CPlus http://www.w3cplus.com/blog/52.html

text-shadow运用得是最多的一个属性,作为我们前端人员我觉得有必要学习并掌握这个text-shadow属性 text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]* 也就是: text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color)

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:[颜色(Co

DIV CSS3 text-shadow字体阴影

CSS3设置文字阴影效果对文字字体设置阴影效果篇text-shadow样式,音乐放松椅本来在CSS2版本中也有此属性,但在CSS3中文字阴影text-shadow再次被应用,丰富文字排版布局美化效果.一.CSS3单词与语法 - TOP 1.CSS3单词:text-shadow 2.语法结构 div{text-shadow:5px 2px 6px #000;} 设置div盒子里文字阴影效果距离左5px和距离上2px开始显示阴影效果,音乐放松椅同时阴影大小范围为6px,阴影颜色为黑色(#000).

使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-text-effect.html .这种方式优点是图片可控,所以可实现很复杂的渐变效果,但是缺点是图片渐变色必须与背景色一致,同时损失了鼠标点击.文字选择等事件. 改进的方法可以使用 CSS3 的背景渐变 -webkit-gradient ,用一个背景渐变的 DIV 代替图片.下面是实现效果示例,相比以

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

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

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 文字阴影和盒子阴影

文字阴影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

CSS3知识之阴影box-shadow

一.定义和用法 box-shadow 属性向框添加一个或多个阴影. box-shadow: h-shadow v-shadow blur spread color inset; h-shadow     必需.水平阴影的位置.允许负值. v-shadow        必需.垂直阴影的位置.允许负值. blur                 可选.模糊距离. spread             可选.阴影的尺寸. color                可选.阴影的颜色. inset