Самый эффективный способ создания блочных теней с помощью CSS

Question

Мне интересно узнать, какой способ создания теней для блоков с помощью CSS наиболее эффективен. Но это я имею в виду: простота реализации, гибкость и совместимость с различными браузерами.

Answer 1

Луковая кожура - мой личный фаворит.

Пример можно найти в этой статье alistapart .

Answer 2

Это теперь очень просто сделать:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33);

Первое значение - горизонтальное смещение. Второе значение - вертикальное смещение. Третье значение - это эффект размытия. Четвертое значение - это цвет.

Кроме того, вы можете добавить еще одно значение inset , благодаря которому тень появится внутри вашего блочного элемента:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;

Это теперь очень хорошо поддерживается: https://caniuse.com/#feat=css- boxshadow

Answer 3

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

Нужны правила CSS:

    .shadow{
      position:relative;
      display:block;
      background-color:#bbb;
      border:1px solid black;
    }

    .shadowed_item{
        position:relative;
        border:1px solid black;
        background-color:white;
        top:-5px;
        left:-5px;
    }

HTML-код, к которому применяется CSS:

<div class='shadow'>
    <div class='shadowed_item'>I have a shadow.</div>
</div>

Я нашел, что это очень просто реализовать, гибко, и он работает так же на FF 3, IE 6 & amp; 7.