在昨天我们知道了什么是rgba后，今天我们就来继续学习css自带的文字阴影样式来制作字体模糊效果。在此之前我们先学习下文字阴影样式text-shadow.

学习text-shadow属性的使用

text-shadow属性介绍

• text-shadow：x y blur color, …

• 参数 x横向偏移 y纵向偏移 blur模糊距离 color阴影颜色

简单用法

text-shadow:2px 2px 4px black

实战练习

html代码片段

<div class="box">每天学习一点点</div>

css样式

.box{

width:50%;

height:200px;

margin: 50px auto;

color:rgba(0,0,0,1);

/*为了看的更清楚设置一秒的动画效果*/

transition: 1s;

font:100px/200px "微软雅黑";

text-align:center;

}

.box:hover{

color:rgba(0,0,0,0);

/*设置文字阴影*/

text-shadow: 0px 0px 100px rgba(0,0,0,0.5);;

}