给图片加边框
来源：互联网 发布：java项目业绩怎么写 编辑：程序博客网 时间：2024/04/30 00:43
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>给图片加边框</title><style type="text/css">*{ margin: 0; padding: 0;}.photo-border{ position: relative; width: 220px; height: 220px; margin: 50px auto;}.photo-border img{ display:block;}.photo-border a{ position: absolute; left: 0; top: 0; display:block; z-index: 1; overflow: hidden;}.photo-border a:hover{ width: 216px; height: 216px; border: 4px solid red; background-color: red;}.photo-border a:hover img{ margin: -4px 0 0 -4px;}/* margin的值等于边框的宽度 */</style></head><body><div class="photo-border"><a href=""><img src="pic01.jpg" alt=""></a></div><div class="photo-border"><a href=""><img src="pic01.jpg" alt=""></a></div><div class="photo-border"><a href=""><img src="pic01.jpg" alt=""></a></div></body></html>
