Нежелательная теневая граница на элементе с перспективой после применения начальной загрузки - PullRequest
Новая
       85

Нежелательная теневая граница на элементе с перспективой после применения начальной загрузки

0 голосов
/ 28 августа 2018

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

Comparison

Вот соответствующий HTML & CSS:

HTML 

<div class="canvas">
 <span class="shadow"></span>
</div>

CSS 

.canvas {
  height: 270px;
  width: 400px;
  border-radius: 50%;
  perspective: 1200px;
}

.shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 50%);
  transform: rotateX(90deg) translateZ(-100px);
  z-index: -1;
}

JSFiddle для воспроизведения:

Нет Boostrap: https://jsfiddle.net/kh84nep2/1/

Bootstrap: https://jsfiddle.net/kh84nep2/3/

Почему это происходит? И как мне убрать границу, не удаляя бутстрап?

1 Ответ

0 голосов
/ 28 августа 2018

Shadow - это имя класса, которое уже существует в начальной загрузке: 

.shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

Переименуйте свой класс в другое. Надеюсь, что-то, что говорит о том, что это ваш собственный класс. 

<div class="canvas">
 <span class="canvas-shadow"></span>
</div>

И ваш CSS: 

.canvas-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0.05) 40%, rgba(0,0,0,0) 50%);
  transform: rotateX(90deg) translateZ(-100px);
  z-index: -1;
}
...