任何方式只在内容框上获取box-shadow

Question

选择放置盒子阴影的位置会很可爱。目前我有一个带有一些填充的div。背景颜色设置为在内容框上剪辑。这很好。但是，我在悬停时出现的盒子阴影从边框开始。也许有一些超级秘密的CSS我不知道（人们可以希望，对吧？）

我知道我可以在.wrapper之后添加另一个div，但我希望避免这种情况。如果实际上可以将盒子阴影放在内容框上，那就更好奇了。

＆＃13;

＆＃13;

.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%;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需在包装中使用margin-bottom: 1em; margin-right: 1em;而不是填充。

CODE SNIPPET

＆＃13;

＆＃13;

.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%;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你已经有了这个包装器，它周围的<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);
}

＆＃13;

＆＃13;

.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%;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

伪方法

＆＃13;

＆＃13;

.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%;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

另一种方法是将padding-top应用于.page类而不是.container类。下面的代码片段可能会解释

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是与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));