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

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 元素上对 stylign 元素使用 broder rdaius。因此，您必须使用 pseudo-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，您需要应用一些基本样式（背景、大小、边框）并确保 border-radius 在所有 div 元素中相同，并且第一个嵌套 div 的高度 >= border-radius :

.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 Background colours with border radius on first section

html

css

background