如何使用CSS实现div外围的自定义绿色线条边框效果

方案1：CSS多重背景实现（推荐） #

无需修改现有HTML结构，仅需要给.description-page增加如下CSS样式即可实现效果：

.description-page {
  position: relative;
  padding: 24px;
  /* 核心边角边框样式 */
  background: 
    linear-gradient(#27ae60, #27ae60) top left / 48px 2px no-repeat,
    linear-gradient(#27ae60, #27ae60) top left / 2px 48px no-repeat,
    linear-gradient(#27ae60, #27ae60) top right / 48px 2px no-repeat,
    linear-gradient(#27ae60, #27ae60) top right / 2px 48px no-repeat,
    linear-gradient(#27ae60, #27ae60) bottom left / 48px 2px no-repeat,
    linear-gradient(#27ae60, #27ae60) bottom left / 2px 48px no-repeat,
    linear-gradient(#27ae60, #27ae60) bottom right / 48px 2px no-repeat,
    linear-gradient(#27ae60, #27ae60) bottom right / 2px 48px no-repeat;
}

可调参数说明：

• 修改48px可调整边角短边框的长度
• 修改2px可调整边框的粗细
• 修改#27ae60可调整边框的颜色

方案2：伪元素实现（兼容性更强） #

适合需要兼容低版本浏览器的场景，代码如下：

.description-page {
  position: relative;
  padding: 24px;
}
/* 左上、右上角边框 */
.description-page::before,
.description-page::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  border: 2px solid #27ae60;
  background: transparent;
}
.description-page::before {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}
.description-page::after {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
}
/* 左下、右下角边框 */
.description-page p::before,
.description-page p::after {
  content: '';
  position: absolute;
  width: 48px;
  height: 48px;
  border: 2px solid #27ae60;
  background: transparent;
}
.description-page p::before {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
}
.description-page p::after {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

如果不想占用内部p标签的伪元素，也可以在.description-page内新增两个空的span标签，专门用来绘制左下、右下角的边框。

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