yuheijotaki.com

たまに見かける画像の周りをgifがぐるぐる回るやつ、どうやるのかなと思ってやってみた。

gifを背景に敷いて、差分を加えたwidthとその分のpaddingで余白を持たせてあげる

<div>
	<a href="#"><img src="image.gif" width="200" height="160"></a>
</div>

div {
	width: 202px;
	height: 162px;
}

div:hover {
	width: 202px;
	height: 162px;
	background: url(border.gif) repeat left top;
}

img {
	padding: 1px;
}

なので正確にはborderじゃないですね
デモ

参考

• mekke