Как я могу смоделировать базовую тень, используя border-image и linear-gradient?

#html #css #border-image

#HTML #css #border-image

Вопрос:

Я хотел бы смоделировать эффект тени, используя border-image и linear-gradient (по соображениям производительности прокрутки я не использую собственный эффект тени).

Как видно из примера ниже и в скрипке, мой попытавшийся подход включает использование border-image для градиента, border-image-beginning для перемещения тени за пределы поля содержимого и border-width для отображения только нижнего края.

По общему признанию, я не очень хорошо понимаю border-image, особенно когда дело доходит до его использования с линейными градиентами. Методом проб и ошибок я добился того, что казалось удовлетворительным результатом. Но, как выясняется, когда ширина div достаточно мала, «тень» полностью исчезает.

Что я могу сделать, чтобы получить тень, как в верхнем поле, но которая работает независимо от размера поля? Ваша помощь в этом действительно ценится!

 .box
{
  /* the "shadow" */
  border-image:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 100 repeat;
    border-image-outset: 0px 0px 6px 0px;
    border-width: 0px 0px 6px 0px;
    border-style: solid; 
  
  /* other stuff */
  font-family: sans-serif;
  font-size: 20px;
  color: #FEFEFE;
  background: #007277;
  margin: 10px 0px;
  float: left;
  clear: left;
  padding: 50px;
}

 <div class="box">
Here's longer text, where the "shadow" appears how I want it to.
</div>

<div class="box">
Short
</div>

1. Используйте box-shadow. developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

2. @pol Не использует его по соображениям производительности прокрутки. Я отредактировал описание, чтобы лучше объяснить это.

Ответ №1:

Чтобы короткая граница работала, вам нужно изменить

 100 repeat;

Для

 0 0 100 0 repeat;

 .box
{
  /* the "shadow" */
  border-image:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0) 100%) 0 0 100 0 repeat;
    border-image-outset: 0px 0px 6px 0px;
    border-width: 0px 0px 6px 0px;
    border-style: solid; 
  
  /* other stuff */
  font-family: sans-serif;
  font-size: 20px;
  color: #FEFEFE;
  background: #007277;
  margin: 10px 0px;
  float: left;
  clear: left;
  padding: 50px;
}

 <div class="box">
Here's longer text, where the "shadow" appears how I want it to.
</div>

<div class="box">
Short
</div>

Эта ссылка может немного помочь вам с отображением границ https://css-tricks.com/understanding-border-image /

1. Отлично, спасибо! Я буду лучше разбираться в border-image. Что меня немного смущает, так это то, что linear-gradient не имеет размера изображения, так к чему относятся проценты среза? Определяет ли ширина границы «размер изображения» линейного градиента?

2. Я провел небольшое исследование, и я считаю border-image-width , что именно это определяет процентное соотношение фрагментов. Я нашел эту другую ссылку наиболее полезной для понимания того, как border-image это работает. tympanus.net/codrops/css_reference/border-image