如何实现电视机屏幕形状的边框？现有CSS3代码效果不符求解决

原代码存在两个核心问题：

• :before 伪元素未设置 position: absolute，且父元素 a 未设置 position: relative，导致伪元素无法正确定位在父元素内部
• 边框圆角比例、定位参数不符合电视边框的形态

下面是修正后的代码，可实现符合预期的电视屏幕边框效果：

a {
  display: block;
  width: 200px;
  height: 150px;
  position: relative; /* 为伪元素提供定位基准 */
  border-top: 1px solid #B0C523;
  border-bottom: 1px solid #B0C523;
  /* 上下边框保持平直，左右留空由伪元素实现圆角边框 */
}

a:before,
a:after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 12px; /* 控制侧边圆角的宽度 */
  border: 1px solid #B0C523;
  border-radius: 30%/100%; /* 仅在垂直方向生成圆角 */
  background-color: transparent;
}

a:before {
  left: -1px;
  border-right: none; /* 避免与父元素边框重复 */
}

a:after {
  right: -1px;
  border-left: none; /* 避免与父元素边框重复 */
}

效果说明 #

• 父元素 a 负责绘制上下平直边框
• 两个伪元素分别实现左右两侧的弧形边框，通过 border-radius: 30%/100% 让圆角仅在垂直方向生效，还原电视屏幕的经典形态
• 调整 width 值可改变侧边圆角的弧度大小，修改 #B0C523 可调整边框颜色

内容的提问来源于stack exchange，提问作者Tung Pham