Question

这是我的代码：

HTML：

<div class="main">
  <img class="in" alt="" src="https://lh6.googleusercontent.com/---lrEvAvGGs/U2i572OasiI/AAAAAAAACVw/zKSuueH1n5Q/s720/1024x1024.jpg">
</div>

CSS：

.main{
    height:240px;
    width: 240px;
    background: #F00;
    border: 1px solid #CCC;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}
.in {
    width: 240px;
    height: 240px;
}

实例：Jsfiddle

正如您在示例中看到的那样，图像的角落周围有一点背景颜色（红色）。

如何删除这些但保留border-radius属性？

Answer 1

只需删除样式

即可

background: #F00; 
border: 1px solid #CCC;

来自班级main。

Answer 2

http://jsfiddle.net/3Nzp3/3/

看到这个小提琴

删除两行

    background: #F00;
    border: 0px solid #CCC;

Answer 3

只需从您的班级主页中删除background: #F00;和border: 1px solid #CCC;即可。你会得到你的输出

像

.main{
    height:240px;
width: 240px;   
border: 0px;
border-radius: 30px;
position: relative;
overflow: hidden;
    //you can use border: 0px;

}

Answer 4

只需从主类

中删除以下代码即可

背景：＃F00; border：1px solid #CCC;

我认为这会对你有帮助。

css border-radius和背景颜色

4 个答案: