Добавление двойной границы к линейному градиенту, заполненному 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>

Я пытался возиться с тенью от ящика, но не мог понять, как сделать эту двойную границу.

С кодомвыше это то, что я получаю:

Я бы хотел, чтобы на границе не было этого "перевернутого цвета" или какого-либо цвета вообще.Между 2 границами должен быть просто белый.

Answer 1

Вы можете использовать контур с черной рамкой и рамкой тени

.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 2

Вы можете просто настроить 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>

Answer 3

Вы можете манипулировать свойством 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>