css 使用border-radius时填充元素之间的空间

okxuctiv 于 2023-06-25 发布在其他

关注(0)|答案(3)|浏览(176)

当我在网格单元格上使用足够大的border-radius属性和gap属性创建网格时，元素之间的拐角处会出现间隙（红色背景）。

body {
  background-color: red;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3,calc(90vw/3));
  grid-template-rows: repeat(3,calc(90vh/3));
  gap: 1vmin;
  width: 90vw;
  height: 90vh;
}
.cell {
  height: 100%;
  width: 100%;
  background-color: gray;
  border: 1vmin solid black;
  border-radius: 15px;
}

<html>
<body>
  <div class="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</body>
</html>

我该如何去填补这些空白与我的边界相同的颜色？

css

来源：https://stackoverflow.com/questions/72824743/fill-in-space-between-elements-when-using-border-radius

3条答案

按热度按时间

xsuvu9jc1#

使用渐变着色：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background: linear-gradient(black 0 0) 50%/90% 90% no-repeat;
  gap: 1vmin;
  width: 90vw;
  height: 90vh;
}

.cell {
  background-color: gray;
  outline: 1vmin solid black;
  border-radius: 15px;
}

<html>

<body>
  <div class="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</body>

</html>

赞(0）回复(0）举报 2023-06-25

h22fl7wq2#

您可以设置容器的background-color来实现这一点。

.grid {
  display: grid;
  grid-template-columns: repeat(3,calc(90vw/3));
  grid-template-rows: repeat(3,calc(90vh/3));
  background-color: black;
  gap: 1vmin;
  width: 90vw;
  height: 90vh;
}
.cell {
  height: 100%;
  width: 100%;
  background-color: gray;
  border: 1vmin solid black;
  border-radius: 15px;
}

<html>
<body>
  <div class="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</body>
</html>

赞(0）回复(0）举报 2023-06-25

ckocjqey3#

如果你改变css，那么设计可以更好一点。

*, ::after, ::before {
    box-sizing: border-box;
}
        .grid {
        background-color: black;
     display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    border-radius: 16px;
}
.cell {
  height: 100%;
  width: 100%;
  background-color: gray;
  border: 1px solid black;
  border-radius: 15px;
  position: relative;
    width: 100%;
    min-height: 1px;
  -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
      height:70px;
}

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>

<div class="grid">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>

</body>
</html>

赞(0）回复(0）举报 2023-06-25

我来回答

css 使用border-radius时填充元素之间的空间

3条答案

相关问题

热门标签

最新问答