チカチカ枠線

IMG画像とかの周りがPhotoshopのあれみたいな効果にするスタイル。

img {
  background-image: (bg_uneune.gif);
  padding: 1px;
}

bg_uneune.gif→

paddingで隙間を空けて、後ろに敷かれているGIFアニメをちょっと見せるという仕掛け。

しかーし、WIN IE6ではDOCTYPEスイッチが標準準拠モードでないとIMG要素にpaddingが効かないので上のCSSではできない。

互換モードで、IE6にも同じように表示させようとすると、IMGの親要素のPやDIVに細工して

<p class="photo"><img src="inu.jpg"～/></p>

p.photo {
  background-image: url(bg.gif);
  padding: 1px;
  display: inline;
  _width: 100px; /*WIN IE6*/
}

/* MACIE \*/
p.photo {
  display: table;
}
/* */

.photo img {
  vertical-align: bottom;
}

ってhackを２個も使ってやるしかない!! 一応これでMACも含め、新しめのブラウザではちゃんと表示されるけど、そこまでしてチカチカさせたい人はいないかもしれない!!

GIFアニメとPaddingの値を少し変えてみたら

お、なんかおめでたい。