Question

我希望能够使用CSS和HTML在照片中创建类似的内容，我使用的是这行代码background-image: linear-gradient(180deg, rgb(32, 34, 47) 35%, rgb(29, 31, 41) 35%);

但是，如此一来，我无法创建照片中所示的边界半径效果，有人可以指导我如何做到这一点吗？目前，我已将该CSS代码应用于body标签。

Image showing 2 background colors with bottom border-radius effect

Answer 1

表达我在评论中已经告诉您的内容。您不能仅在HTMl元素上在样式元素上使用broder rdaius。因此，您必须使用伪div并将其以负的z-index推送到背景。 div是HTML元素，因此也可以通过这种方式设置样式。

body {
  background-color: red;
}

#background {
  position: fixed;
  top: 0;
  bottom: 60%;
  left: 0;
  right: 0;
  border-radius: 0 0 15px 15px;
  z-index: -1;
  background-color: blue;
}

#content {
  margin: 40px;
  padding: 10px;
  background-color: white;
  border-radius: 5px;
}

<body>
  <div id="background">
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
</body>

Answer 2

您可以执行以下操作：在HTML中，创建一个div元素并在其中嵌套另一个div，第一个嵌套的div将是您的上边框，第二个将具有文本（或任何内容）：

<div class=container>
  <div></div>
  <div>text here</div>
</div

对于CSS，您需要应用一些基本样式（背景，大小，边框），并确保所有div元素的border-radius都相同，并且第一个嵌套的div的高度> =边界半径：

.container {
  background-color:grey;
  width:250px;
  height:250px;
  border-radius:6px;
}

.container :first-child{
  width:100%;
  height:6px;
  background: linear-gradient(180deg, rgb(32, 34, 47) 35%, rgb(29, 31, 41) 35%);
  border-radius:6px 6px 0 0;
}

.container :last-child{
  width:100%;
  height:calc(100% - 6px);
  border-radius:0 0 6px 6px;
  display:flex;
  align-items:center;
  justify-content:center;
}

2第一部分具有边框半径的背景色

2 个答案: