CSS - Возможно ли добавить рамку на поле тени? - PullRequest
Новая
       51

CSS - Возможно ли добавить рамку на поле тени?

0 голосов
/ 28 января 2020

Можно ли добавить границу к box-shadow?

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

Теперь я Я знаю, что могу создать div и сместить его, чтобы получить желаемый вид, но я хочу знать, возможно ли это сделать без него, поэтому я могу просто создать класс и добавить его в div, что я тоже хочу сделать.

Я приложил фрагмент, показывающий смещение цвета, но я бы хотел, чтобы красное смещение было обведено черной рамкой. 

.example-div{
  width: 100px;
  height: 100px;
  border: 1px solid black;
  box-shadow: -5px 5px red;
}
<div class="example-div">
</div>

Ответы [ 3 ]

2 голосов
/ 28 января 2020

Вы можете добавить дополнительные рамки-тени к вашему div, чтобы получить этот эффект. Для вашего случая обновите ваше свойство box-shadow примерно так: 

box-shadow: -5px 5px red, 
    -5px 5px 0px 3px black;

Этот ресурс содержит массу дополнительной информации о box-shadows и его синтаксис https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow, если вы хотите следовать .

0 голосов
/ 28 января 2020

Вы можете добавить псевдоэлемент CSS в свой класс, который автоматически добавит еще один объект за основным объектом на каждый элемент, который имеет этот класс. Используйте абсолютную позицию, отрицательные значения z-index, 100% width и height и определите смещение с помощью параметров left или right и bottom или top, как в этом примере:

(примечание: при использовании этого метода необходим непрозрачный фон для основного элемента) 

.example-div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: relative;
  background: #fff;
}
.example-div::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -5px;
  bottom: -5px;
  width: 100%;
  height: 100%;
  background: red;
  border: 1px solid black;
}
<div class="example-div">
</div>
0 голосов
/ 28 января 2020

CSS контур и граница , к сожалению, не сильно помогут, поскольку box-shadow на самом деле не существует и они по-прежнему будут нацелены на ограничивающий прямоугольник элемента (на который не влияет тень блока).

Вы можете использовать ::before или ::after , но это становится немного сложнее для того, что вы пытаетесь сделать.

Одна вещь, которую вы можете сделать, это использовать несколько коробок-теней . box-shadow принимает список теней через запятую и поддерживается во всех основных браузерах. Хитрость здесь заключается в том, чтобы использовать 4-й (недостаточно используемый IMHO) параметр для box-shadow, который называется spread-radius. Это будет «растягивать» (расширять) или «душить» (уменьшать) эталонную рамку тени блока на столько пикселей до радиуса размытия.

В вашем случае для 2px Широкая «граница» вокруг рамки-тени, вы можете сделать следующее: 

.example-div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  box-shadow: -5px 5px red, -5px 5px 0 2px blue;
}
<div class="example-div"></div>
...