很多时候在 做html+css样式的时候会给图片添加一些鼠标经过显示的效果，比如添加阴影，显示边框等等效果，那么在html+css中，如何使用伪元素给图片添加鼠标经过显示边框呢，下面就跟大家分享下如何操作。工具/原料moreSublime Text等开发工具方法/步骤1/11分步阅读

首先，打开Sublime Text，新建一个新html文件，写好html基本结构。如图：

2/11

接着，在body区域中先写一个div盒子，并插入需要做效果的图片。如图：

3/11

接着，在head区域中，插入css样式，用来美化以及添加效果，并写入图片的大小。如图：

4/11

接着，继续添加鼠标经过图片的效果。如图：

5/11

接着，完成后，使用浏览器打开，然后在页面右键单击，在弹出的下拉框中选择检查（谷歌浏览器），预览下效果，看是否添加伪元素成功，如果出现伪元素，就说明成功了。如图：

6/11

接着，给图片添加边框样式，使得鼠标经过显示出来。如图：

7/11

接着，给边框加上定位，使得边框跟图片重合在一起，并且浮在图片的上方。如图：

8/11

接着，使用浏览器打开预览，发现盒子的边框比图片大的很多。如图：

9/11

接着，继续在伪元素样式中添加样式美化，使边框的大小与图片的大小一致。如图：

10/11

接着，打开浏览器预览，可以看到边框和图片完全贴合在一起。如图：

11/11

至此，html+css使用伪元素给图片添加鼠标经过显示边框教程分享结束。

注意事项

如有疑问请留言