将双边框添加到 linear-gradient-filled-div 也会给边框上色

Question

我有一个 div 想要进行渐变填充。我还想为 div 添加双边框，但我不希望它具有 div.

的颜色渐变

我这里有我的代码来显示问题：
http://jsfiddle.net/753rxozh/1/

.colors {
  width: 100px;
  border: 10px double black;
  /* box-shadow:inset 0 0 0 10px black; */
  padding: 10px;
  height: 50px;
  background: linear-gradient(#fff, orange);
}

<div class="colors"></div>

我试着弄乱了 box-shadow，但不知道如何让它成为双边框。

使用上面的代码，这就是我得到的：

我想让边框完全没有 "reversed color" 或任何颜色。两个边框之间应该是白色的。

Answer 1

你可以操作 box-shadow 属性...你可以有多个！

.colors {
  width: 100px;
  padding: 10px;
  height: 50px;
  background: linear-gradient(white, orange);
  box-shadow:
    inset 0 0 0 2px black,
    inset 0 0 0 8px white,
    inset 0 0 0 10px black;
}

<div class="colors"></div>

Answer 2

您可以使用带有黑色边框和框阴影的轮廓

.colors {
    outline: 3px solid white;
    width: 100px;
    border: 2px solid black;
    box-shadow: 0 0 0 6px black;
    padding: 10px;
    height: 50px;
    margin: 0 auto;
    background: linear-gradient( #fff, orange);
}

<div class="colors"></div>

Answer 3

你可以简单的调整渐变的background-clip就可以保持透明度：

.colors {
  width: 100px;
  border: 10px double black;
  padding: 10px;
  height: 50px;
  background: linear-gradient(#fff, orange) padding-box;
}

body {
  background: pink;
}

<div class="colors"></div>

另一个想法是考虑outline-offset，你仍然可以保持透明度：

.colors {
  width: 100px;
  border: 2px solid black;
  outline:2px solid black;
  outline-offset:4px;
  padding: 10px;
  height: 50px;
  margin:10px;
  background: linear-gradient(#fff, orange) padding-box;
}

body {
  background: pink;
}

<div class="colors"></div>

将双边框添加到 linear-gradient-filled-div 也会给边框上色

Adding a double border to a linear-gradient-filled-div colors the border too

css

border

linear-gradients