css - 仅在内容框上获取框阴影的任何方法

Question

如果可以选择放置盒子阴影的位置，那就太好了。目前我有一个带有一些填充的 div。背景颜色设置为剪辑在内容框上。那挺好的。但是，我在悬停时出现的框阴影从边界框开始。也许有一些我不知道的 super secret css(希望如此，对吧？)

我知道我可以在 .wrapper 之后添加另一个 div，但我希望避免这种情况。更好奇的是，是否真的可以将 box-shadow 定位在 content-box 上。

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

Answer 1

您已经有了您所说的包装器，<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>