Question

我正在尝试使用div为响应表制作一个圆角，但是div的顶部没有被圆化。

这是我当前预览的样子：

我的HTML结构：

<div class="coltable">
<div class="col">
    <h4>Name</h4>
    <p>John</p>
</div>
<div class="col">
    <h4>Title</h4>
    <p>Manager</p>
</div>

我要实现的是圆角（顶部边框尚未圆角）。我该如何解决？

Answer 1

您的内部内容当前溢出并且可见。您需要添加CSS属性overflow: hidden。

因此它将是：

.coltable {
....
overflow: hidden;
}

通过这种方式，无论您添加多少内部项目，总会在顶部和底部四舍五入。

Answer 2

您需要根据h4元素所在的列进行四舍五入。例如：

.coltable .col h4 {
    margin: 0;
    padding: .75rem;
    border-bottom: 2px solid #dee2e6;
    background-color: blue;
    padding-left: 40px;
    color: #fff;
    border-radius: 10px 0 0 0; // add this to your code
}

.coltable .col:last-child h4 {
  border-radius: 0 10px 0 0;
}

这些值代表从左上角到顺时针旋转的每个角。

我已经使用last-child伪指令来定位右边的列；如果您添加了额外的第3列，它仍然会起作用。

这是更新的小提琴：http://jsfiddle.net/ajt98kqy/3/

Answer 3

如果使用的是Bootstrap 4，则可以将“四舍五入”类添加到div中。

e.g "<div class="coltable rounded">

否则，您可以通过执行以下任一操作来使用样式“ border-radius”。

内联样式：

 <div class="coltable" style="border-radius: 5px;">

外部样式：

CSS：

.rounded{
border-radius: 5px; // This will round every side of your border.
}

HTML：

<div class="coltable rounded">

Remember if you are using external CSS, you will have to link to your css file in the 
<head> tag of your document.

<link rel="stylesheet" href="path/to/file/nameofcssfile.css">

Answer 4

将overflow: hidden;添加到.coltable类中。

您的div .col类别与您的.coltable div重叠。

制作嵌套div的圆角

4 个答案: