Question

像these这样的网站如何显示带圆角的图片？

我使用Firebug检查了下载的图像是否有尖角，但显示的图像已经被修改过了。

编辑：我指的是在上述网站的“精选”文章部分中看到的圆形缩略图。

Answer 1

的图像叠加层

<img class="rounders2_img" width="103" height="80" alt="" src="http://pad2.whstatic.com/images/thumb/1/18/Shadow-of-a-Writing-Hand-1834.jpg/-crop-103-80-103px-Shadow-of-a-Writing-Hand-1834.jpg"/>
<img class="rounders2_sprite" src="http://pad1.whstatic.com/skins/WikiHow/images/corner_sprite.png" alt=""/>

drop shadows通常使用相同的技术。

http://www.alistapart.com/d/onionskin/images/onionskin_cover.gif

这样做是因为IE不支持很多CSS 3很酷的东西，比如rounded corners：

moz-border-radius: 5px; -webkit-border-radius: 5px;

Answer 2

你也可以在没有图像的情况下做到这一点（在某处阅读，找不到链接），在样式表中定义：

#divallrounded { /* every border rounded */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Answer 3

有几种方法可以实现这一目标，但在这种情况下，他们是如何做到的：

如果您查看HTML，您会看到<img>位于<a>内，同一<a>内是<img>，{{ 3}}。如果你看这个图像，你会发现它是一系列适合各种尺寸的白色角落。使用CSS时，他们只是将图像覆盖在图像的顶部，这些图像的圆角要圆，这样角落就会与适当大小的图像对齐。他们执行此操作的CSS文件是corner_sprite.png。搜索“rounders”（CSS美化器可能在这里很有用）。