Применить границу на поле тени

Question

Применить границу на поле тени

0

Есть ли способ применить границу к тени ящика без необходимости создавать два отдельных div?

Попытка создать что-то вроде этого:

http://i42.tinypic.com/21npelc.jpg

mousesports 16 янв. 2014, в 23:22

Источник

0

Где тень от коробки? Я вижу сплошной черный блок с границей позади него.
Josh Powell 16 янв. 2014, в 21:26
0

Белая часть - это коробка-тень.
mousesports 16 янв. 2014, в 21:27
0

Стек нескольких теней.
David Nguyen 16 янв. 2014, в 21:28
0

Я вижу, мой ответ должен дать вам хорошее представление о том, как этого добиться.
Josh Powell 16 янв. 2014, в 21:35
0

Спасибо Джошу за обе скрипки - высоко ценится.
mousesports 16 янв. 2014, в 21:42

Показать ещё 3 комментария

Теги:

html

css

css3

2 ответа

2

Вы можете использовать несколько теней теней:

http://jsfiddle.net/chriscoyier/Vm9aM/

img {

box-shadow:
    0 0 0 10px hsl(0, 0%, 80%),
    0 0 0 15px hsl(0, 0%, 90%);
}

Jordan Foreman 16 янв. 2014, в 19:28

0

4 способа сделать то же самое. отлично
Mihnea Belcin 16 янв. 2014, в 22:56

Ещё вопросы

Где тень от коробки? Я вижу сплошной черный блок с границей позади него.
Я вижу, мой ответ должен дать вам хорошее представление о том, как этого добиться.
Спасибо Джошу за обе скрипки - высоко ценится.
4 способа сделать то же самое. отлично

Josh Powell · Accepted Answer · 2014-01-16T18-49-00.000Z

Вот как я буду обходиться с псевдоэлементами, поэтому вам больше не нужно добавлять html.

HTML

<div class="box">

</div>

CSS

.box {
    width: 300px;
    height: 80px;
    background: black;
    position: relative;
}

.box:after {
    content: "";
    display: block;
    width: 300px;
    height: 80px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: absolute;
    top: 10px;
    left: 10px;
    border: 1px solid black;
}

Наконец скрипка: Демо

Вот скрипка с тенью на ней: демо или демо

Небольшое редактирование, --moz- :) Двойной тире перед префиксом.
Хороший улов! Желаем удачи в вашем дизайне.