<!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>
给图片加边框
最新推荐文章于 2022-10-22 10:48:54 发布