HTML 图片圆角不执行,css3圆角无效怎么办

做页面的时候遇到CSS3圆角无效的情况，实例代码：

css代码：

body{

background: #eee;

}

.box-menu {

-webkit-border-radius: 14px;

-moz-border-radius: 14px;

border-radius: 14px;

border: 3px solid #BADA55;

}

.box {

/*background: #fff;*/

}

html代码

a1

a2

a3

你会发现圆角居然没有出现！让我们加上边框看看发生了什么：.box-menu {

border: 3px solid #BADA55;

}

仔细观察可以发现，圆角被类为box的div所设置背景挡住了。将background: #fff;注释，我们看到了圆角

从此可以得出结论，CSS3的圆角会被子元素的背景遮挡，从而产生圆角无效的假象。

本文来自css答疑栏目，欢迎学习！