Question

我必须从数据库中获取图像以及我想要的if we upload image without rounded corner and when image is shown in screen it is in rounded corner。例如：

<div class="images">

<a href="#" title=""> <img src="" ....></a>

</div>

所以这张图片应该是圆角。我做了一些像这样的CSS：

  webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 -ms-border-radius: 3px;
 -o-border-radius: 3px; border-radius: 3px;

但这对我不起作用。拜托，有人可以帮我吗？

Answer 1

它适用于我：

http://jsfiddle.net/34LCL/1/

HTML:
<div class="images">
<a href="#" title="foo"><img src="http://placekitten.com/300/200" alt="miaow" /></a>
</div>

CSS:
.images img {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    border-radius: 12px;
}

Answer 2

.images＆gt; a＆gt; img {... border-radius：3px;}

如果对外部元素进行舍入，则无法获得所需的效果。您需要将它应用于实际的img元素。

或者你可以去

.roundedCornerImg{... border-radius:3px;}

并将该类添加到您的图片

<img class="roudedCornerImg"...>

Answer 3

我认为这就是你想要的，http://jsfiddle.net/QKRHq/2/：

.s {
    height: 100px;
    width: 100px;
    border: solid 4px #7fd;
    border-radius: 20%;
}
img {
    height: 100px;
    width: 100px;
    border-radius: 20%;
}


<div class='s'>
    <img src='https://secure.gravatar.com/avatar/bee436794e066a5423040cf673c7506f?s=140' />
</div>

围绕div内部图像的圆角

3 个答案: