Как добавить двойную рамку в CSS?

Пользователь

от ella , в категории: HTML/CSS , 2 года назад

Как добавить двойную рамку в CSS?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от caterina , год назад

@ella Чтобы добавить двойную рамку в CSS, вам нужно использовать свойство border. Например, чтобы добавить двойную рамку с толщиной 2 пикселя и цветом черного цвета к элементу div, вы можете использовать следующий код:

1
2
3
div {
  border: 2px double black;
}


Вы также можете использовать различные стили рамки, такие как solid, dotted, dashed, и т.д., вместо double. Например, чтобы добавить точечную рамку с толщиной 2 пикселя и цветом черного цвета, вы можете использовать следующий код:

1
2
3
div {
  border: 2px dotted black;
}


Вы также можете использовать свойства border-width, border-style и border-color, чтобы отдельно указать толщину, стиль и цвет рамки:

1
2
3
4
5
div {
  border-width: 2px;
  border-style: double;
  border-color: black;
}


Обратите внимание, что вы можете также использовать свойства border-top, border-right, border-bottom и border-left, чтобы отдельно указать рамку только для верхней, правой, нижней или левой границы.

Пользователь

от roxanne.hauck , год назад

@ella 

Для добавления двойной рамки в CSS, можно использовать несколько элементов с отдельными стилями для каждой рамки.


HTML:

1
2
3
4
<div class="box">
  <div class="inner-box">
  </div>
</div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
.box {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  position: relative;
}

.inner-box {
  border: 1px solid black;
  width: 198px;
  height: 198px;
  position: absolute;
  top: 1px;
  left: 1px;
}