阴影效果

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：DW CSS样式

作者：黄金成     年级：2018级

撰写时间：2019年01月18日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在html中我们可以给文本和图片设置各种各样的样式，显然一个好的界面看起来也可以让人觉得你下了不少苦工。以前都是原本的样子，后来了解到可以设置阴影后就觉了解了一下，便知道box-shadow属性和text-shadow 属性。box-shadow属性向框添加一个或多个阴影、text-shadow 属性向文本设置阴影。

1. box-shadow属性

代码如下：

效果如下：

 

1. text-shadow 属性

代码如下：

 

效果如下：

 

 

    有了阴影，若是在标题使用定会是标题增添不少亮点。

box-shadow属性只能给盒子设置阴影而不能给文本设置阴影；text-shadow 属性只能给文本设置阴影而不能给盒子设置阴影，所以千万不要混淆。