Блог

Главная - Вопросы по программированию - Как бы я сделал так, чтобы этот стиль окна отображался прямо над блоком div, а не справа?

Как бы я сделал так, чтобы этот стиль окна отображался прямо над блоком div, а не справа?

#css

Вопрос:

коробка-тень-изображение

Вот код и веб-сайт, на котором я нашел стиль. Спасибо.

https://getcssscan.com/css-box-shadow-examples

 box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 60px

Ответ №1:

Измените значения X и Y. (первые 2 значения после цвета)

 div {
  margin-top: 50px;
  margin-left: 50px;
  height: 200px;
  width: 200px;
  box-shadow: blue 0px 0px 0px 3px inset, 
  rgb(255, 255, 255) 0px -10px 0px -3px, 
  rgb(31, 193, 27) 0px -10px, 
  rgb(255, 255, 255) 0px -20px 0px -3px, 
  rgb(255, 217, 19) 0px -20px, 
  rgb(255, 255, 255) 0px -30px 0px -3px, 
  rgb(255, 156, 85) 0px -30px, 
  rgb(255, 255, 255) 0px -40px 0px -3px, 
  rgb(255, 85, 85) 0px -40px; 
  padding-top: 50px; 
  padding-bottom: 50px; 
  border-radius: 60px: white;
} 
 <div></div>

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

1. Йоу! Спасибо, что ответили. Я менял значения x и y, но, похоже, не могу поднять их вертикально вверх. Они либо складываются слева, либо складываются справа. Есть какие-нибудь идеи о том, как заставить его укладываться только сверху? Ценю это.

2. @callumnoble Отредактировал мой фрагмент. Запустите его еще раз. Ты это имеешь в виду?

3. Это прекрасно! Спасибо, что уделили мне время, я ценю это.

4. @callumnoble np, береги себя

Ответ №2:

центр происхождения и spread-radius тени:

 .box {
  margin: 50px;
  width: 50px;
  height: 50px;
  box-shadow: blue 0px 0px 0px 2px inset, rgb(255 255 255) 0 0 0px 4px, rgb(31 193 27) 0 0px 0 6px, rgb(255 255 255) 0 0 0px 8px, rgb(255 217 19) 0 0 0px 10px, rgb(255 255 255) 0 0 0px 12px, rgb(255 156 85) 0 0 0 14px, rgb(255 255 255) 0 0 0px 16px, rgb(255 85 85) 0 0 0 18px;
} 
 <div class="box"></div>

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

1. Йоу! Спасибо за ответ. Этот код охватывает весь div, знаете ли вы, что он просто выровнен по верху, а не наклонен вправо в моем первом примере? Я ценю ваше время, спасибо.

Метки: , ,