css3圆角无效怎么办

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

css代码：

<style type="text/css">
    body{
        background: #eee;
    }
  .box-menu {
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    border: 3px solid #BADA55;
  }

  .box {
    /*background: #fff;*/
  }
</style>

html代码

<div class="box-menu">
  <div class="box">
    <a href="#">a1</a>
  </div>
  <div class="box">
    <a href="#">a2</a>
  </div>
  <div class="box">
    <a href="#">a3</a>
  </div>
</div>

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

.box-menu {
    border: 3px solid #BADA55;
}

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

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

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

以上就是css3圆角无效怎么办的详细内容，更多请关注0133技术站其它相关文章！