厦门网站设计公司seo零基础入门到精通200讲
根据豆包提示，有2个方案：使用使用伪元素 ::after，使用 linear-gradient 背景
方案1：通过伪元素 ::after 可以创建一个新的元素，并为其设置样式，模拟只显示一半宽度的底部边框。
解释：
.half-border类设置了position: relative，为伪元素::after提供定位参考。::after伪元素的content: ''是必需的，用于创建一个空的内容块。position: absolute使伪元素脱离文档流，bottom: 0和left: 0将其定位到<div>元素的左下角。width: 50%使伪元素的宽度为父元素宽度的一半，border-bottom设置了底部边框的样式。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.half-border {position: relative;width: 200px;height: 100px;border: 1px solid #ccc;}.half-border::after {content: '';position: absolute;bottom: 0;left: 0;width: 50%;border-bottom: 2px solid red;}</style>
</head><body><div class="half-border">这是一个带有半底边边框的 div</div>
</body></html>方案2：使用 linear-gradient 背景来模拟底部边框，通过控制渐变的宽度来实现只显示一半的底部边框。
解释：
linear-gradient(to right, red 50%, transparent 50%)创建了一个从左到右的渐变，前 50% 为红色，后 50% 为透明。background-size: 100% 2px设置渐变背景的大小，宽度为 100%，高度为 2px。background-repeat: no-repeat防止背景重复。background-position: bottom将渐变背景定位到元素的底部。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>.half-border-gradient {width: 200px;height: 100px;border: 1px solid #ccc;background: linear-gradient(to right, transparent 50%,red 50% );//透明渐变开始，红色渐变开始background-size: 100% 2px;//宽度，高度background-repeat: no-repeat;background-position: bottom;}</style>
</head><body><div class="half-border-gradient">这是一个使用渐变模拟半底边边框的 div</div>
</body></html>