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

Question

如果可以选择放置框阴影的位置，那就太好了。目前我有一个带有一些填充的 div。背景颜色设置为剪辑在内容框上。那挺好的。但是，我在悬停时出现的框阴影从边界框开始。也许有什么超级秘密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

只需在包装器中使用 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>

Answer 2

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

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

Answer 3

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

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

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

Any way to get box-shadow only on content-box

css

clip

border-box

box-shadow