css - 渐变边框上的边框(轮廓)

Question

使用这个:

background: -moz-linear-gradient(315deg, transparent 10px, black 10px);

如何在不使用 border 的情况下围绕它创建边框或轮廓？

Answer 1

这不是一个理想的解决方案，但我们可以使用色标并使用 ::before/::after 伪元素来伪造边框，如下所示:

(为简洁起见省略了供应商前缀。)

div {
  width: 150px;
  height: 50px;
  background: linear-gradient(315deg, transparent 10px, red 10px, red 12px, black 12px);
  border-top: 2px solid red;
  border-left: 2px solid red;
  position: relative;
}

div::after, div::before {
  content: "";
  position: absolute;
  background: red;
}

div::before {
  width: 2px;
  top: 0; right: 0; bottom: 14px;
}

div::after {
  height: 2px;
  left: 0; right: 14px; bottom: 0;
}

<div></div>