使用CSS3制作的比较好看的阴影效果

本文介绍了使用CSS3制作的比较好看的阴影效果，阴影效果有时候是非常棒的存在，用的巧妙可以起到非常好的效果。本教程的CSS是齐鲁建站小编精心调制的，效果那是相当的棒。推荐给有所需要的朋友，试试看吧。

下面齐鲁建站就和大家分享下使用CSS3制作的比较好看的阴影效果。

实现教程：

1、html样式

复制代码代码如下:

<div class="block black" style="background-color: #444;">

<span style="color: rgba(0, 0, 0, 0.5);">

I love test

我爱考试

</span>

</div></p> <p><br clear="all"></p> <p><div class="block white">

<span style="color: rgba(128, 128, 128, 0.5);">

I love test

我爱考试

</span>

</div>

2、简单的css样式

复制代码代码如下:

<style>

.block {

font-size: 2em;

font-weight: bold;

margin: 2px;

padding: 2px;

border: solid #AAA 1px;

display: inline-block;

}

.black {

text-shadow: 1px 1px 2px #888, 0 0 0 #000;

}</p> <p>.white {

text-shadow: 1px 1px 2px #FFF, 0 0 0 #000;

}

</style>

都是比较简单的样式，很容易理解吧！