Question

我想在我的自举面板上打圆角。但是，当我将外部div设置为具有圆角时，它们被面板主体和面板标题覆盖，其3px角落。如何覆盖它，即停止身体/标题设置角落，而不是为每个身体和头部设置所有四个角落？

我首先将身体背景设置为蓝色的浅蓝色：

.panel-body {
    background: #d9edf7;
}

这是html

<div class="panel-group">
    <div class="panel panel-info" style="-moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -ie-border-radius: 12px;
    -opera-border-radius: 12px;
    -chrome-border-radius: 12px;
    border-radius: 12px;">
        <div class="panel-heading"><h2>Don't have an account?</h2></div>
        <div class="panel-body">
                       register here!
        </div>
    </div>
</div>

感谢。

Answer 1

添加overflow: hidden

.panel-body {
    background: #d9edf7;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group">
    <div class="panel panel-info" style="-moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -ie-border-radius: 12px;
    -opera-border-radius: 12px;
    -chrome-border-radius: 12px;
    border-radius: 12px; overflow: hidden;">
        <div class="panel-heading"><h2>Don't have an account?</h2></div>
        <div class="panel-body">
                       register here!
        </div>
    </div>
</div>

bootstrap corner radius覆盖我的外部div panel角

1 个答案: