Любой способ получить box-shadow только для content-box

Было бы неплохо иметь возможность разместить тень блока. В настоящее время у меня есть div с некоторыми дополнениями. Цвет фона установлен для клипа в поле содержимого. Это хорошо. Однако тень окна, которая появляется при наведении курсора, начинается с границы поля. Возможно, есть какой-то суперсекретный css, которого я не знаю (можно пожелать, да?)

Я знаю, что могу добавить еще один div после .wrapper, но я стараюсь этого избегать. Более любопытно, действительно ли возможно разместить тень блока в поле содержимого.

.page {
  background: #e9e9e9 none repeat scroll 0 0;
  min-height: 100vh;
  height:100%;
  width: 100%;
}

.container {
  width: 30%;
  margin: 0 auto;
  padding-top: 50px;
}

.wrapper {
  padding-bottom: 1em;
  padding-right: 1em;
  background: white none repeat scroll 0 0;
  color: #666;
  transition: box-shadow 0.2s ease-in-out 0s;
  background-clip:content-box;
}

.wrapper:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img{width:100%;}
<div class="page">
<div class="container">
  <div class="wrapper">
    <a href="#">
      <img src="http://placekitten.com/g/330/175">
      <div class="content-wrapper">
        <h4>Events</h4>
        <p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
      </div>
    </a>
  </div>
</div>


clip css box-shadow border-box
person BMCwebdev    schedule 27.06.2016    source источник

Ответы (4)


arrow_upward
1
arrow_downward

У вас уже есть эта оболочка, о которой вы говорите, <a> вокруг нее. Вам также нужно стилизовать его и применить к нему тень:

.wrapper a {
  padding-bottom:1px;/* to deal with collapsing margin if not reset (to <p> here) */
  display:block;
  transition: box-shadow 0.2s ease-in-out 0s;
  }
.wrapper a:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}


.page {
  background: #e9e9e9 none repeat scroll 0 0;
  min-height: 100vh;
  height:100%;
  width: 100%;
}

.container {
  width: 30%;
  margin: 0 auto;
  padding-top: 50px;
}

.wrapper {
  padding-bottom: 1em;
  padding-right: 1em;
  background: white none repeat scroll 0 0;
  color: #666;
  background-clip:content-box;
}
.wrapper a {
  padding-bottom:1px;
  display:block;
  transition: box-shadow 0.2s ease-in-out 0s;
  }
.wrapper a:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img{width:100%;}
<div class="page">
<div class="container">
  <div class="wrapper">
    <a href="#">
      <img src="http://placekitten.com/g/330/175">
      <div class="content-wrapper">
        <h4>Events</h4>
        <p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
      </div>
    </a>
  </div>
</div>

псевдо подход

.page {
  background: #e9e9e9 none repeat scroll 0 0;
  min-height: 100vh;
  height:100%;
  width: 100%;
}

.container {
  width: 30%;
  margin: 0 auto;
  padding-top: 50px;
}

.wrapper {
  padding-bottom: 1em;
  padding-right: 1em;
  background: white none repeat scroll 0 0;
  color: #666;
  background-clip:content-box;
  position:relative;
}
.wrapper:before {
  content:'';
  position:absolute;
  pointer-events:none; /* allow to reach links or inside wrapper content */
  top:0;
  bottom:1em;
  left:0;
  right:1em;
  transition: box-shadow 0.2s ease-in-out 0s;
  }
.wrapper:hover:before {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img{width:100%;}
<div class="page">
<div class="container">
  <div class="wrapper">
    <a href="#">
      <img src="http://placekitten.com/g/330/175">
      <div class="content-wrapper">
        <h4>Events</h4>
        <p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
      </div>
    </a>
  </div>
</div>

person G-Cyrillus    schedule 27.06.2016
comment
Спасибо, GCyrillus, это действительно отвечает на заданный вопрос. Окончательная цель дизайна состоит в том, чтобы иметь ряд из 3 или около того контейнеров или карточек. Некоторые будут иметь текст, который длиннее, чем другие. Контейнеры будут согнуты, чтобы сделать их все одинаковой высоты. Используя это решение, ссылки ‹a› также должны быть изогнуты. Также может быть случай, когда вся карта не будет обернута тегом ‹a›, в этом случае это не сработает. Мне было очень любопытно, существует ли такая вещь, как background-clip:content-box, которую можно было бы применить к box-shadow. В любом случае, спасибо, это работает. - person BMCwebdev; 01.07.2016
comment
@ К сожалению, тени рисуются на вставке или выходе из краев, но вы можете использовать абсолютный псевдоэлемент, который будет иметь единственную цель - нарисовать тень ‹edit добавлен фрагмент с псевдоподходом в мой ответ /› - person G-Cyrillus; 01.07.2016
comment
Очень интересно, не думал использовать псевдоэлемент. Я отмечу это как принятый ответ, потому что я думаю, что это близко к решению, которое получит что угодно, и учитывает все другие сценарии. - person BMCwebdev; 01.07.2016

arrow_upward
1
arrow_downward

Просто используйте margin-bottom: 1em; margin-right: 1em; в своей оболочке вместо заполнения.

ФРАГМЕНТ КОДА:

.page {
  background: #e9e9e9 none repeat scroll 0 0;
  min-height: 100vh;
  height:100%;
  width: 100%;
}

.container {
  width: 30%;
  margin: 0 auto;
  padding-top: 50px;
}

.wrapper {
  margin-bottom: 1em;
  margin-right: 1em;
  background: white none repeat scroll 0 0;
  color: #666;
  transition: box-shadow 0.2s ease-in-out 0s;
  background-clip:content-box;
}

.wrapper:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
img{width:100%;}
<div class="page">
<div class="container">
  <div class="wrapper">
    <a href="#">
      <img src="http://placekitten.com/g/330/175">
      <div class="content-wrapper">
        <h4>Events</h4>
        <p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
      </div>
    </a>
  </div>
</div>

person Ricky    schedule 27.06.2016
comment
Спасибо, Рикардо. Хотя это действительно решает описанную проблему, в моем конкретном случае мне понадобилось заполнение, поскольку оно работает с отрицательным полем в родительском div, чтобы даже разнести все дочерние элементы с помощью flexbox. Я не был готов сделать полную копию страницы, над которой я работаю, и это была лишь частичная. Но, как я уже сказал, отвечает на поставленный вопрос. - person BMCwebdev; 30.06.2016
comment
Я вижу, у вас есть рабочая демоверсия? Включая родительский div, чтобы я мог попытаться найти решение, подходящее для этого конкретного случая. - person Ricky; 30.06.2016

arrow_upward
0
arrow_downward

Другой способ — применить padding-top к классу .page вместо класса .container. Фрагмент кода ниже может объяснить

.page {
  background: #e9e9e9 none repeat scroll 0 0;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  padding-top: 50px;
}

.container {
  width: 30%;
  margin: 0 auto;
}

.wrapper {
  padding-bottom: 1em;
  padding-right: 1em;
  background: white none repeat scroll 0 0;
  color: #666;
  transition: box-shadow 0.2s ease-in-out 0s;
}

.wrapper:hover {
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

img {
  width: 100%;
  background-clip: content-box;
}
<div class="page">
	<div class="container">
    	<div class="wrapper">
      		<a href="#">
        		<img src="http://placekitten.com/g/330/175">
        		<div class="content-wrapper">
          			<h4>Events</h4>
          			<p>Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer? Want to suggest an event or volunteer?</p>
        		</div>
      		</a>
   		</div>
   </div>
</div>

person cr05s19xx    schedule 27.06.2016

arrow_upward
0
arrow_downward

Вот решение, которое работает с background-clip:content-box;

Используйте следующее вместо box-shadow :

   filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15));
   -webkit-filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15));
person lpbouvier    schedule 15.04.2019