css - 如何使用伪元素 :after using css and give border to it? 将包装器(如 div)添加到标签

Question

我可以给完美 border-radius使用 :after 到图像, :before和 content:"" ？我知道我可以将图像包装在 span 中或 div去做吧。但我很好奇我是否可以不向 html 添加额外的元素

我需要为图像添加完美的边框，但我 cannot add border to <img> 因为它在所有浏览器中都不是完美的。

看我老问题就知道问题How to get perfect border radius on images in all browsers?

<div class="small-images">
<img src="theme/a/img/Image_232_black.jpg">
<img src="theme/a/img/product1-232-bottom.jpg">
<img src="theme/a/img/product1-232-up.jpg">
</div>

Answer 1

一个小窍门就是用一点点 jQuery 来做到这一点:

DEMO jsBin

(在mozilla、chrome、ie9、opera中查看)

jquery:

$('.small-images img').bind('load each',function(){
  var img = $(this);
  var imgH = img.height();
  var imgW = img.width();
  var src = img.attr('src');
  img.after('<div class="rounded">');
  img.next('.rounded').css({
    backgroundImage: 'url('+src+')',
    width: imgW+'px',
    height: imgH+'px'
  }).end().remove();
});

所需的 CSS:

  .rounded{
    border-radius:20px;
    border:4px solid #444;
  }

还有你的 HTML:

<div class="small-images">
   <img src="theme/a/img/Image_232_black.jpg">
   <img src="theme/a/img/product1-232-bottom.jpg">
   <img src="theme/a/img/product1-232-up.jpg">
</div>

如您所见，它用 DIV 替换了图像，该 DIV 具有由图像 src 本身抓取的背景图像。