Html 图像上的圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11595886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rounded corners on images
提问by Jeremy Ahn
I want rounded corners on both corners at the top of the image. It technically is there but is being covered by the image. I've looked all over the web and I've seen people talk about overflow: hidden;or even JavaScript (which I want to avoid as much as possible) but I never seemed to be able to implement it onto my existing piece of code.
我希望图像顶部的两个角都有圆角。它在技术上是存在的，但被图像覆盖。我浏览了整个网络，我看到人们谈论overflow: hidden;甚至 JavaScript（我想尽可能避免），但我似乎从未能够将它实现到我现有的代码中。
Thanks in advance.
提前致谢。
<section class="container">
<header>
<img src="http://i.imgur.com/CpL8u.png" style="box-shadow: 0px 0px 10px #888;" />
</header>
<section class="body">
Lorem ipsum blahblah I don't know the rest.
</section>
</section>
CSS:
CSS：
header {
width: 640px;
margin-left: -10px;
margin-top: -10px;
}
section.container {
background: #fff;
width: 620px;
margin: auto;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
box-shadow: 0px 0px 20px #888;
}
section.body {
margin-top:10px;
}
采纳答案by Wouter J
You need to add a border-radiusto that image: http://jsfiddle.net/WouterJ/48Y37/1/
您需要border-radius向该图像添加一个：http: //jsfiddle.net/WouterJ/48Y37/1/
回答by John Doe
To round the actual image, you have to make sure that the <img>tag's class actually has the border-radiusproperty. For example:
要对实际图像进行四舍五入，您必须确保<img>标签的类实际上具有该border-radius属性。例如：
<img class="roundrect" src="/whatever-your-source-is.png">
And the corresponding CSS would look like this:
相应的 CSS 将如下所示：
.roundrect {
border-radius: 15px;
}
回答by user9209769
- Copy the picture with Snipping Tool and paste into Paint.
- Choose the Rounded Rectangle shape and change the color to white.
- Choose the largest size for the Rectangle.
- Then put the white rounded border around the picture.
- Then copyand pastethe rounded picture wherever you need it.
- 使用截图工具复制图片并粘贴到Paint 中。
- 选择圆角矩形形状并将颜色更改为白色。
- 选择矩形的最大尺寸。
- 然后在图片周围放置白色圆形边框。
- 然后将圆形图片复制并粘贴到您需要的任何位置。
