带圆角的图像

Question

如何喜欢的网站，这些让显示与圆角图片？

我检查了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=""/>

相同的技术通常用于投影 。

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

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> ， corner_sprite.png 。 如果你看这个图像，你会发现它是一系列适合各种尺寸的白色角落。 使用CSS时，他们只是将图像覆盖在图像的顶部，这些图像的圆角要圆，这样角落就会与适当大小的图像对齐。 他们这样做的CSS文件就在这里 。 搜索“rounders”（CSS美化器可能在这里很有用）。

Answer 4

试试jquery 圆角插件 。 我认为这可以做你想要的

Answer 5

我觉得你错了 - 查看那些大标注的图片 -

http://pad3.whstatic.com/skins/WikiHow/images/actionBox_background_curl.png

...这里的图像位于主容器div（div.actions_shell）的顶部 -

http://pad1.whstatic.com/skins/WikiHow/images/actions_top.png

......都包括圆角。

关于“特色”部分中的缩略图，它们只是覆盖了.png，除了白色圆角切口外，它是透明的：

http://pad1.whstatic.com/skins/WikiHow/images/corner_sprite.png

Answer 6

实际上没有必要使用<img>标签来实现此站点的功能。 您可以使用css完成所有操作（不使用CSS3属性）。 圆角的技巧是找到额外的元素来将你的角落图像挂在css上。

看到：

滑动门和定制角落

忘记所有这些帖子谈论moz-border-radius和-webkit-border-radius 。 CSS3属性名为border-radius ，所有现代浏览器都支持它。

Answer 7

他们正在使用图像在角落上进行四舍五入。 您可以像使用<img>标签一样执行此操作，或者使用CSS为<div> s和此类背景图像提供元素。

他们的网站使用圆形图像......不确定你在FireBug中说了什么，但它们是圆形的。 或者，您可以将css背景图像用于整个部分或边框，而不是使用单独的<img>标记。

另一种选择是CSS中的圆角 ，但并非所有浏览器都支持这一点。