CSS3:TEXT-SHADOW|BOX-SHADOW（炫彩字体）
作者：互联网
2016年2月26日个人博客文章--迁移到segmentfault
（1）text-shadow(文本阴影)
在介绍css3:text-shadow文本阴影之前，我们先来看看用它都能实现什么效果：
没错文本的阴影的效果很强大，接下来我们就一起开始学习吧.
语法：text-shadow：none | length{2,3} color
默认值：none
取值：
none:无阴影
第1个长度值：阴影水平偏移值。可为负值
第2个长度值：阴影垂直偏移值。可为负值
第3个长度值：可选，阴影模糊值。不允许负值
color： 设置阴影的颜色
说明:可以设定多组效果，每组参数值以逗号分隔
text-shadow:水平偏移量 垂直偏移量 阴影模糊值 颜色（rgba）,
水平偏移量 垂直偏移量 阴影模糊值 颜色（rgba）,
水平偏移量 垂直偏移量 阴影模糊值 颜色（rgba）
注意：(1)使用空格分开不同属性值 (2)使用逗号分开不同阴影属性
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--<link rel="stylesheet" href="reset.css">-->
<style>
body{font-family:"微软雅黑",Arail,Tabhoma; }
p{width:380px;height:50px;line-height: 50px;margin:0 auto;padding:40px 0;text-align:center;font-size:44px;font-weight:bold; background:#d5d2c1;}
p:nth-child(1){background: #454545; color: #333; text-shadow:-1px -1px #bdbdbd,1px 1px #656565;}
p:nth-child(2){
background: #000; color: #fff;
text-shadow:
0 0 3px rgba(229,0,245,1),
0 0 6px rgba(229,0,245,0.9),
0 0 8px rgba(229,0,245,0.9),
0 0 14px rgba(229,0,245,0.9),
0 0 22px rgba(229,0,245,0.7),
0 0 28px rgba(229,0,245,0.7),
0 0 36px rgba(229,0,245,0.6),
0 0 48px rgba(229,0,245,0.5),
0 0 54px rgba(229,0,245,0.3),
0 0 68px rgba(229,0,245,0.1);}
p:nth-child(3){background: #eee; color: #f90204; text-shadow:0 -1px 2px rgba(255,52,7,0.9),0 -2px 4px rgba(255,52,7,0.8),0 -3px 7px rgba(255,52,7,0.8),0 -4px 11px rgba(255,52,7,0.7),0 -5px 17px rgba(255,87,7,0.7),0 -6px 35px rgba(255,87,7,0.5),0 -7px 48px rgba(255,87,7,0.4),0 -8px 68px rgba(255,87,7,0.2);}
</style>
</head>
<body>
<p>Beautiful Text</p>
<p>Beautiful Text</p>
<p>Beautiful Text</p>
</body>
</html>在浏览器上展示效果如图所示：
（2）box-shadow（盒阴影）
因为box-shadow与text-shadow用法几乎相同只是box-shadow与文本阴影相比，盒阴影多了一个属性值——阴影外延值（第四个值）
语法：box-shadow：none | length{2,4} color默认值：none
取值：
none： 无阴影
第1个长度值：阴影水平偏移值。可为负值
第2个长度值：阴影垂直偏移值。可为负值
第3个长度值：可选，阴影模糊值。不允许负值
第4个长度值：可选，阴影外延值。不允许负值
color： 设置阴影的颜色。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<meta name="keywords" content="">
<meta name="description" content="">
<!--<link rel="stylesheet" href="reset.css">-->
<style>
body{font-family:"微软雅黑",Arail,Tabhoma; }
p{width:380px;height:50px;line-height: 50px;margin:0 auto;padding:40px 0;text-align:center;font-size:44px;font-weight:bold; background:#d5d2c1;}
p:nth-child(1){background: #454545; color: #333; text-shadow:-1px -1px #bdbdbd,1px 1px #656565;}
p:nth-child(2){
background: #000; color: #fff;
text-shadow:
0 0 3px rgba(229,0,245,1),
0 0 6px rgba(229,0,245,0.9),
0 0 8px rgba(229,0,245,0.9),
0 0 14px rgba(229,0,245,0.9),
0 0 22px rgba(229,0,245,0.7),
0 0 28px rgba(229,0,245,0.7),
0 0 36px rgba(229,0,245,0.6),
0 0 48px rgba(229,0,245,0.5),
0 0 54px rgba(229,0,245,0.3),
0 0 68px rgba(229,0,245,0.1);}
p:nth-child(3){background: #eee; color: #f90204; text-shadow:0 -1px 2px rgba(255,52,7,0.9),0 -2px 4px rgba(255,52,7,0.8),0 -3px 7px rgba(255,52,7,0.8),0 -4px 11px rgba(255,52,7,0.7),0 -5px 17px rgba(255,87,7,0.7),0 -6px 35px rgba(255,87,7,0.5),0 -7px 48px rgba(255,87,7,0.4),0 -8px 68px rgba(255,87,7,0.2);}
div{ float:left; margin:100px; width:400px; height:300px; font-size: 20px; line-height: 300px; text-align: center; }
.d1{box-shadow:0px 0px 50px 50px rgba(153,153,238,1);}
.d2{box-shadow:50px 0px 50px 50px rgba(153,153,238,1);}
.d3{box-shadow:-50px 0px 50px 0px rgba(153,153,238,1);}
</style>
</head>
<body>
<p>Beautiful Text</p>
<p>Beautiful Text</p>
<p>Beautiful Text</p>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
</body>
</html>
标签：CSS3,BOX,rgba,阴影,245,229,SHADOW,shadow,255 来源： https://www.cnblogs.com/baimeishaoxia/p/11965183.html