css - 添加边框到填充

Question

我有一个 div，左右边距都设置为 50px。

是否可以添加紫色边框？

我无法向 HTML 添加代码，这应该尽可能使用纯 css 来完成。我试图用 border-image 来欺骗它并添加渐变，但我只能这样添加:

div {
  width: 150px;
  height: 150px;
  background-color: grey;
  padding-left: 50px;
  padding-right: 50px;

  border-top: 5px solid black;
  border-image: linear-gradient(to right, white 50px, purple 0%);
  border-image-slice: 1;
}

<div>Content</div>

https://jsfiddle.net/u7zq0amc/1/

Answer 1

改用伪元素:

div {
  width: 150px;
  height: 150px;
  background-color: grey;
  padding-left: 50px;
  padding-right: 50px;
  position:relative;
  margin-top:20px;
}
div:before {
  content:"";
  position:absolute;
  height:5px;
  top:-5px;
  right:50px;
  left:50px;
  background:red;
}

<div>Content</div>