Блог

Главная - Вопросы по программированию - Отображение тени поверх псевдоэлемента

Отображение тени поверх псевдоэлемента

#html #css #pseudo-element #pseudo-class

#HTML #css #псевдоэлемент #псевдокласс

Вопрос:

Я пытаюсь добиться следующего эффекта: Окно с тенью и красочный баннер

Код, который у меня есть, выглядит следующим образом:

 .box {
  background: #fff;
  width: 600px;
  height: 100px;
  position: relative;
  z-index: 999;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.75);
}

.box::after {
  background: linear-gradient(to right, #00a1e4 25%, #ff9a00 25%, #ff9a00 50%, #00a525 50%, #00a525 75%, #8c449d 75%);
  position: absolute;
  content: "";
  height: 10px;
  right: 0;
  left: 0;
  bottom: -10px;
  z-index: 1;
}  
 <div class="box">
</div>

Псевдоэлемент отображается поверх тени блока в приведенном выше примере,
как я могу заставить тень появляться поверх псевдоэлемента?

Вот пример в codepen

Комментарии:

1. Вместо этого использовать before ?

2. @Paulie_D Это все еще заставляет тень появляться под псевдоэлементом

Ответ №1:

Вы можете перерисовать тень внутри псевдоэлемента :

 .box {
  background: #fff;
  width:600px;
  height:100px;
  position: relative;
  z-index: 999;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.75);
}

.box::after {
    background: linear-gradient(to right, 
      #00a1e4 25%, 
      #ff9a00 25%, 
      #ff9a00 50%, 
      #00a525 50%, 
      #00a525 75%, 
      #8c449d 75%);
    position: absolute;
    content: "";
    height: 10px;
    right: 0;
    left: 0;
    bottom: -10px;
    z-index: 1;
  box-shadow: inset 0 5px  4px -3px rgba(0, 0, 0, 0.75);
}  
 <div class="box">
  
</div>

вы также можете использовать режим смешивания-blend-mode :

 .box {
  background: #fff;
  width:600px;
  height:100px;
  position: relative;
  z-index: 999;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.75);
}

.box::after {
    background: linear-gradient(to right, 
      #00a1e4 25%, 
      #ff9a00 25%, 
      #ff9a00 50%, 
      #00a525 50%, 
      #00a525 75%, 
      #8c449d 75%);
    position: absolute;
    content: "";
    height: 10px;
    right: 0;
    left: 0;
    bottom: -10px;
    z-index: 1;
 mix-blend-mode:multiply;
}  
 <div class="box">
  
</div>

Комментарии:

1. Это работает отлично, однако стоит упомянуть, что вам больше не нужна тень от окна .box Спасибо!

2. о! я не понимал, что на скриншоте есть только граница…