如何用纯CSS实现图示的带阴影边框线条效果？

问题根源 #

你提供的代码中重复声明了border和box-shadow属性，CSS遵循后声明覆盖前声明的规则，因此最终只会生效最后一组样式：

border: 1px solid #28780D;
box-shadow: 0px 4px 25px rgba(40, 120, 13, 0.25);

这就是无法实现预期线条效果的核心原因。

针对性解决方案 #

根据Figma中常见的双层边框+阴影效果，提供三种可行实现方式：

方式1：伪元素实现独立双层边框与阴影

适合需要两层边框各自带独立阴影的场景：

/* 目标元素基础样式 */
.target-element {
  position: relative;
  /* 第一层边框与阴影 */
  border: 1px solid #7BE34A;
  box-shadow: 0px 4px 25px rgba(123, 227, 74, 0.25);
  /* 按需添加元素尺寸，示例值 */
  width: 200px;
  height: 60px;
}

/* 伪元素实现第二层边框与阴影 */
.target-element::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid #28780D;
  box-shadow: 0px 4px 25px rgba(40, 120, 13, 0.25);
  pointer-events: none; /* 不干扰元素本身的交互 */
  z-index: -1; /* 将第二层阴影置于元素下方 */
}

方式2：多层阴影模拟双层边框

如果不需要真实的双层边框，仅需视觉上的双层线条效果，可通过多层box-shadow实现：

.target-element {
  /* 基础边框 */
  border: 1px solid #7BE34A;
  /* 第一层阴影 + 内层模拟边框的阴影 */
  box-shadow: 
    0px 4px 25px rgba(123, 227, 74, 0.25),
    0 0 0 1px #28780D inset;
  /* 按需添加元素尺寸 */
  width: 200px;
  height: 60px;
}

方式3：渐变边框+单阴影

如果预期效果是渐变线条边框+单一阴影，可使用背景渐变实现：

.target-element {
  border: 1px solid transparent;
  /* 渐变边框：内层填充背景 + 外层渐变边框 */
  background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #7BE34A, #28780D);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  /* 阴影效果 */
  box-shadow: 0px 4px 25px rgba(123, 227, 74, 0.25);
  /* 按需添加元素尺寸 */
  width: 200px;
  height: 60px;
}

内容的提问来源于stack exchange，提问作者Кирило Положенець