如何在HTML中添加阴影效果

在我们浏览网页的时候会发现有的网页在你鼠标划过的时候边缘会出现一层阴影效果，就比如

然后在样式中添加box-shadow，因为是鼠标滑到图片上面才显示阴影，所以我们要设置滑动，在滑动里面添加box-shadow，这里我是设了双层的阴影，就是给了双份的box-shadow，中间用逗号隔开，第一层控制图片外围的一圈白边，第二层控制阴影

当鼠标没有滑过图片时

当鼠标滑过图片时

box-shadow：后面有5个数值

第1个长度值⽤来设置对象的阴影⽔平偏移值。⽔平偏移量正值向， 右负值向左；

第2个长度值⽤来设置对象的阴影垂直偏移值。垂直偏移量正值向 ，下负值向上；

第3个长度值则⽤来设置对象的阴影模糊值。模糊度不能为负值；

第4个长度值则⽤来设置对象的阴影外延值。不允许负值

第5个是设置对象的阴影的颜⾊

是不是很神奇

我学识有限，若有错误，还望及时指出，以免误导他人，谢谢！！！

使用icon font来生成图标相对于基于图片的图标来说，有如下的好处：

1.自由的变化大小

2.自由的修改颜色

3.添加阴影效果

4.IE6也可以支持

5.支持图片图标的其它属性，例如，透明度和旋转等等

6.可以添加text-stroke和background-clip:text等属性，只要浏览器支持

如何使用？

文字修饰：

<h3>

<span aria-hidden="true" data-icon="⇝"></span>

Stats

</h3>

[data-icon]:before {

font-family: icons/* BYO icon font, mapped smartly */

content: attr(data-icon)

speak: none/* Not to be trusted, but hey. */

}

单独图标：

<a href="#" class="icon-alone">

<span aria-hidden="true" data-icon="▨"></span>

<span class="screen-reader-text">RSS</span>

</a>

/* Same CSS as above, plus */

.icon-alone {

display: inline-block/* Chrome 19 was weird with clickability without this */

}

.screen-reader-text { /* Reusable, toolbox kind of class */

position: absolute

top: -9999px

left: -9999px

}

创建你自己的icon font - IcoMoon

如果大家需要创建自己的iconfont，推荐使用iconmoon，使用它你可以通过上传SVG或者字体来生成你需要的icon字体，本文在线演示使用iconmoon生成。

步骤1：选择他们提供的或者上传自己的

步骤2：

请大家访问在线演示查看效果。希望大家喜欢Icon字体。如果大家觉得图标不够光滑的话，可以考虑使用cufon做处理，这样生成的图标更加美观。