为填充添加边框

Question

我有一个 div，padding 设置为左​​右 50px。

可以加紫色边框吗？

我无法在 HTML 中添加代码，如果可能的话，这应该使用纯 css 来完成。我试图用边框图像和添加渐变来欺骗这个，但我只能这样添加：

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>