如何实现类似示例的边角不规则边框？

根据你提供的示例图，你需要的是上下边框较细、左右边框较粗的自定义边框效果，下面提供两种简单可行的实现方案：

方案一：伪元素模拟边框 #

这种方法利用相对定位的容器和伪元素来构建边框，边角衔接自然，不会出现宽度不均的问题：

.custom-border {
  position: relative;
  padding: 20px; /* 内部留白，根据需求调整 */
  background-color: #ffffff; /* 背景色需与页面背景一致，用于覆盖伪元素中间区域 */
}

.custom-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #000000; /* 基础上下边框粗细 */
  border-left-width: 8px; /* 左边框加粗 */
  border-right-width: 8px; /* 右边框加粗 */
  pointer-events: none; /* 避免伪元素干扰内部元素的交互 */
}

方案二：背景渐变实现边框 #

通过拆分四个独立的线性渐变层，分别对应上下左右四个边框，无需额外元素：

.custom-border {
  padding: 20px; /* 内部留白，根据需求调整 */
  background: 
    linear-gradient(#000000, #000000) left / 8px 100% no-repeat,
    linear-gradient(#000000, #000000) right / 8px 100% no-repeat,
    linear-gradient(#000000, #000000) top / 100% 2px no-repeat,
    linear-gradient(#000000, #000000) bottom / 100% 2px no-repeat;
}

你之前尝试渐变没成功，大概率是因为没有拆分单独的渐变层来分别控制各边，以上两种方案都能精准实现你想要的边框样式，可根据实际场景选择使用。

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