1.text-shadow效果
2.代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
div {
width: 300px;
height: 80px;
background: #666666;
padding: 30px;
font: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;
color: #fff;
text-transform: uppercase;
margin: 0 auto;
}
.demo1 {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
}
.demo2 {
color: #fff;
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);
}
</style>
</head>
<body>
<div class="demo1">
mohao
</div>
<div class="demo2">
3d text effect
</div>
</body>
</html>
3.box-shadow
box-shadow: inset :
<!--阴影类型，默认外阴影outset，inset设置为内阴影；-->
x-offset ：
<!-- 是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边； -->
y-offset ：
<!-- 是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部； -->
blur-radius ：
<!-- 阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； -->
spread-radius ：
<!-- 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小 -->
color：
<!--阴影颜色；-->