Двойная граница с разным цветом

В Photoshop я могу поместить две разные границы элемента с двумя разными цветами. И с этим я могу сделать много динамических оттенков с моими элементами. Даже с эффектами Photoshop я могу справиться с Drop Shadow и Inner Shadow.

В отношении веб-дизайна, если у меня есть дизайн, как показано ниже, как я могу добиться этого с помощью CSS? Это действительно возможно?

ПРИМЕЧАНИЕ. Я даю две границы белым элементам: внешняя граница белая, а внутренняя граница серая. Вместе они создают динамический вид, так что он чувствует себя как элемент вставки, а белый элемент - тиснением подушки. Итак, немного:

div.white{
   border: 2px solid white;
   border: 1px solid grey;
}

Но вы знаете это двойное объявление и недействительны. Итак, как я могу управлять такой вещью в CSS?

И если я ставлю border-style: double, то вы знаете, что я не могу передать два разных цвета для сингл double.

div.white{
       border: double white grey;
}

Кроме того, я знаком с препроцессором LESS CSS. Поэтому, если это возможно с использованием препроцессора CSS, пожалуйста, дайте мне знать.

Ответ 1

В качестве альтернативы вы можете использовать псевдоэлементы для этого:) Преимущество псевдоэлементного решения состоит в том, что вы можете использовать его для помещения внутренней границы на произвольное расстояние от фактической границы, а фон будет отображаться через это пространство. Разметка:

body {
  background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
  background-repeat: no-repeat;
  height: 100vh;
}
.double-border {
  background-color: #ccc;
  border: 4px solid #fff;
  padding: 2em;
  width: 16em;
  height: 16em;
  position: relative;
  margin: 0 auto;
}
.double-border:before {
  background: none;
  border: 4px solid #fff;
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  pointer-events: none;
}

<div class="double-border">
  <!-- Content -->
</div>

Ответ 2

Я использую контурное свойство css 2, которое просто работает. Проверьте это, прост и даже легко оживить:

.double-border {
  display: block;
  clear: both;
  background: red;
  border: 5px solid yellow;
  outline: 5px solid blue;
  transition: 0.7s all ease-in;
  height: 50px;
  width: 50px;
}
.double-border:hover {
  background: yellow;
  outline-color: red;
  border-color: blue;
}

<div class="double-border"></div>

Ответ 3

Использование псевдоэлемента, предложенное Terry, имеет один PRO и один CON:

PRO - отличная совместимость между браузерами, поскольку псевдоэлемент поддерживается также в более старом IE.
CON - для этого требуется создать дополнительный (даже если сгенерированный) элемент, этот infact определяется псевдоэлементом.

В любом случае это отличное решение.

ДРУГИЕ РЕШЕНИЯ:

Если вы можете принять совместимость с IE9 (В IE8 нет поддержки для этого), вы можете достичь желаемого результата двумя другими способами:

используя свойство outline в сочетании с border и одну вставку box-shadow
используя два box-shadow в сочетании с border.

Здесь jsFiddle с модифицированным кодом Terry, который показывает рядом, эти другие возможные решения. Основные свойства для каждого из них следующие (другие разделяются в классе .double-border):

.left
{
  outline: 4px solid #fff;
  box-shadow:inset 0 0 0 4px #fff;
}

.right
{
  box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}

МЕНЬШИЙ код:

Вы спросили о возможных преимуществах использования препроцессора как LESS. Я этот конкретный случай, полезность не так велика, но в любом случае вы можете что-то оптимизировать, объявляя цвета и border/ouline/shadow с помощью @variable.

Вот пример моего CSS-кода, объявленного в LESS (изменение цветов и ширины границы становится очень быстрым):

@double-border-size:4px;
@inset-border-color:#fff;
@content-color:#ccc;

.double-border 
{
  background-color: @content-color;
  border: @double-border-size solid @content-color;
  padding: 2em;
  width: 16em;
  height: 16em;
  float:left;
  margin-right:20px;
  text-align:center;
}

.left
{
  outline: @double-border-size solid @inset-border-color;
  box-shadow:inset 0 0 0 @double-border-size @inset-border-color;
}

.right
{
  box-shadow:0 0 0 @double-border-size @inset-border-color, inset 0 0 0 @double-border-size @inset-border-color;
}

Ответ 4

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

    <div class="borders">
      Hello
    </div>

    .borders{
    border: 1px solid grey; 
    outline: 2px solid white;
     }

https://jsfiddle.net/Ivan5646/5eunf13f/

Ответ 5

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

<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}

Ответ 6

вы можете добавить бесконечные границы, используя box-shadow, используя css3 предположим, что вы хотите применить несколько границ на одном div, тогда код выглядит следующим образом:

div {
    border-radius: 4px;
    /* #1 */
    border: 5px solid hsl(0, 0%, 40%);

    /* #2 */
    padding: 5px;
    background: hsl(0, 0%, 20%);

    /* #3 
    outline: 5px solid hsl(0, 0%, 60%); */

    /* #4 AND INFINITY!!! (CSS3 only) */
    box-shadow:
        0 0 0 10px red,
        0 0 0 15px orange,
        0 0 0 20px yellow,
        0 0 0 25px green,
        0 0 0 30px blue;
}

Ответ 7

Попробуйте создать структуру для применения двух цветов,

<div class="white">
    <div class="grey">
    </div>
</div>

.white
{
    border: 2px solid white;   
}

.grey
{
    border: 1px solid grey;   
}

Ответ 8

Вы можете использовать свойства border и box-shadow вместе с псевдо-элементами CSS для достижения эффекта с тремя границами. См. Пример ниже, чтобы понять, как создать три границы в нижней части div:

.triple-border:after {
    content: " ";
    display: block;
    width: 100%;
    background: #FFE962;
    height: 9px;
    padding-bottom: 8px;
    border-bottom: 9px solid #A3C662;
    box-shadow: -2px 11px 0 -1px #34b6af;
}

<div class="triple-border">Triple border bottom with multiple colours</div>