0

可以选择放置盒子阴影的位置会很可爱。目前我有一个带有一些填充的 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>

4

4 回答 4

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>

于 2016-06-27T21:32:32.830 回答
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>

于 2016-06-27T21:42:46.897 回答
0

另一种方法是将 应用于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>

于 2016-06-27T21:41:46.850 回答
0

这是一个适用的解决方案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));
于 2019-04-15T14:52:48.547 回答