要在CSS中实现底部弧形边框效果，可以使用 border-radius 属性结合 ::after 或 ::before 伪元素来创建一个弧形的底部边框。以下是一个示例代码，展示如何实现这种效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>底部弧形边框</title>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
background-color: #f0f0f0;
overflow: hidden;
}
.container::after {
content: '';
position: absolute;
bottom: -50px; /* 调整这个值来控制弧形的深度 */
left: 0;
width: 100%;
height: 100px; /* 调整这个值来控制弧形的高度 */
background-color: #f0f0f0;
border-radius: 50% 50% 0 0; /* 创建弧形效果 */
}
</style>
</head>
<body>
<div class="container">
<!-- 内容可以放在这里 -->
</div>
</body>
</html>
.container: 这是包含内容的容器，设置了宽度、高度和背景颜色。.container::after: 使用伪元素 ::after 来创建弧形底部边框。
bottom: -50px;：将伪元素向下移动，使其部分超出容器，形成弧形效果。width: 100%;：使伪元素的宽度与容器相同。height: 100px;：设置伪元素的高度，控制弧形的形状。border-radius: 50% 50% 0 0;：将伪元素的顶部两个角设置为50%的圆角，形成弧形效果。bottom 和 height 的值来控制弧形的深度和高度。border-radius 的值，或者使用多个伪元素来叠加效果。这个示例代码可以在大多数现代浏览器中正常工作，并且可以根据需要进行进一步的定制。