渐变边框上的边框（轮廓）

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>

Answer 2

您可以使用 box-shadow、inset 和/或 outset，想用多少就用多少

div {
  background:linear-gradient(45deg,yellow,purple,gray,lime,turquoise);
  box-shadow:0 0 0 5px turquoise;
  padding:2em 3em;
  display:inline-block;
  margin:0.5em;
  }
div:nth-child(even) {
  box-shadow:0 0 0 3px gray, 0 0 0 6px tomato,inset 0 0 0 2px ,inset 0 0 0 5px white;}
div:last-of-type {
  box-shadow: 0 0;}

<div></div><div></div><div></div><div></div><div></div>

或继续使用渐变：

div {
  background:
    linear-gradient(to left, black, black)  no-repeat,    
    linear-gradient(to top, black, black)  no-repeat,    
    linear-gradient(to right, black, black) no-repeat,    
    linear-gradient(to bottom, black, black)  no-repeat,
    linear-gradient(to bottom left, gray,transparent,yellow) purple
    ;
   background-position: left bottom  ,right top , left top,left top ; 
  background-size: 100% 2px, 2px 100%,100% 2px, 2px 100%, 100%;
  padding:2em 3em;
  float:left;
  margin:0.5em;
  }

<div></div><div></div><div></div><div></div>

渐变边框上的边框（轮廓）

Border (outline) on gradient border

css

gradient

border