css 使页脚顶线向内弯曲

Question

我正在构建一个 html 页面，其中页脚位置固定。 我想创建这个页脚顶部边框线向内弯曲。 但如果不使用页脚的相对位置并使用伪元素作为绝对位置，我就无法做到这一点。

我的想法的例子是下面的照片。

这是我当前页脚的CSS。

footer {
    bottom:0;
    width: 100%;
    padding: 10px;
    text-align: center;
    position:fixed;
    -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0px -10px 15px 10px rgba(146, 143, 143, 0.149);
  background-color: rgba(228, 228, 228, 0.15); 
}

页脚在更改为我想要的想法后应该作为固定位置工作。

Answer 1

要在不使用

position: relative

和伪元素的情况下为固定页脚创建弯曲的向内顶部边框，您可以使用 CSS 直接设置页脚样式。以下是如何实现此效果的示例：

footer {
  width: 100%;
  padding: 10px;
  text-align: center;
  position: fixed;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: rgba(228, 228, 228, 0.15);
  overflow: hidden; /* Hides any content that goes beyond the curved top */
}

footer::before {
  content: "";
  width: 100%;
  height: 20px; /* Adjust the height as needed for the curve */
  background-color: rgba(228, 228, 228, 0.15); /* Match the background color of the footer */
  border-radius: 50% / 100px 100px 0 0; /* Creates a curved shape */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* Places it behind the footer content */
}

在此示例中，我们使用

::before

伪元素在页脚顶部创建弯曲形状。

border-radius

属性用于实现曲线效果。您可以调整

height

和

border-radius

值来控制曲线的外观。

请记住调整颜色、填充和其他样式以匹配您的设计。根据您的要求，此方法避免使用

position: relative

和伪元素。