带圆角的图片

Question

类似这些网站如何显示带有圆角的图片？

我使用Firebug检查了正在下载的图像，发现它们具有尖锐的角落，但是显示的图像已经被修改了。

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

- KJ Saxena

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;

- Esteban Küber

---

你贴出的链接里没显示任何内容。能否请你指向一份说明这个叠加技术的资源？ - KJ Saxena

Answer 2

您也可以在没有图像的情况下实现此操作（我曾经在某个地方看到过，但现在找不到链接了），只需在样式表中定义如下：

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

- Anthony Labarre

---

只能在Chrome/Safari中用于图像：在Firefox中它不适用于图像，在IE中它根本不起作用。 - casraf

我的唯一补充是确保在结尾处使用W3C（建议的）官方版本，因此：border-radius: 10px; - 对于不支持圆角的浏览器，它们最终会跟上潮流，而在此之前，四个直角通常是可以接受的设计变化。（长 live渐进增强）。 - user241244

Answer 3

有几种方法可以实现这个目标，但在这个例子中，他们是这样做的：

如果你查看HTML代码，你会发现<img>标签在一个<a>标签内，并且同样在这个<a>标签内还有第二个<img>标签，corner_sprite.png。如果你查看这个图片，你会发现它是一系列适合各种尺寸的白色角落。使用CSS，他们只需将此图像覆盖在他们想要圆角的图像上，以便其角落与适当尺寸的图像相对应。他们用来实现这一点的CSS文件在这里。搜索“rounders”（CSS美化器可能会有用）。

- Jordan Running

Answer 4

尝试使用jQuery圆角插件。我认为这可以实现你想要的效果。

- Josh Mein

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

- matt lohkamp

---

我相信Crimson指的是“特色文章”下面的圆形缩略图。 - Jordan Running

不，看一下特色文章部分的图片。 - KJ Saxena

明白了，嗯，答案基本上还是一样的- 他们只是使用了包含圆角的图片，在特色缩略图的情况下，圆角是通过覆盖在顶部的 .png 实现的。 - matt lohkamp

Answer 6

实际上，完全没有必要使用<img>标签来实现这个网站所做的事情。您可以使用CSS（而不使用CSS3属性）完成所有操作。圆角的技巧是在CSS中找到额外的元素来挂接您的角落图像。

请参见：

滑动门和自定义角落

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

- Finbarr

---

但这并不是链接中使用的技术。此外，CSS3的border-radius目前实现得非常稀少，只有在未来保护和除了-moz-和-webkit-（更不用说-khtml-版本）才值得使用。 - David Thomas

我的评论是，支持moz和-webkit版本的浏览器也支持标准的border-radius版本，因此使用冗长的版本是相当自我打击的。 - Finbarr

Answer 7

他们正在使用图像来实现圆角。您可以像他们一样使用<img>标记，或者使用CSS为<div>等元素提供带有背景图像的样式。

他们的网站使用了圆形图片......不确定在FireBug中怎么说，但它们是圆形的。或者，您可以使用CSS背景图像来为整个部分或边框设置样式，而不是使用单独的<img>标记。

另一种选择是使用CSS中的圆角, 但并非所有浏览器都支持这一功能。

- Nick Craver

---

您能否详细说明一下？我没听懂 :( - KJ Saxena