CSS框阴影部分透明？

Question

我的四边都有一个带阴影的div。然而，在div的底角，我已经定位了一个背景图像（png），使角落看起来像折叠。有没有办法可以让底角的盒子阴影透明？或者还有其他方法吗？

Mant谢谢，p

Answer 1

<强>解释

您可以将position: absolute和消极bottom和left属性设置为角落，将position: relative设置为父元素（框） ）将此归档。

假设这是您的框，其中是角落。

<div class="box">
  <div class="corner"></div>
</div>

我们的框有5px shadow size

.box {
  -webkit-box-shadow: 0 0 5px rgba(40,128,1,1);
  -moz-box-shadow: 0 0 5px rgba(40,128,1,1);
  box-shadow: 0 0 5px rgba(40,128,1,1);
}

因此，我们的角落将有bottom: -5px和right: -5px;

.box > .corner {
  bottom: -5px;
  right: -5px;
}

请记住，我们需要使用position: absolute;

的角落

.box > .corner {
  position: absolute;
}

父母position: relative

.box {
  position: relative;
}

使用bottom和left属性对此进行归档。

演示|段

body {
  background: #EFECCA;
  padding: 20px;
}

.box {
  width: 50%;
  height: 150px;
  position: relative;
  background: #fff;
  -webkit-box-shadow: 0 0 5px rgba(40,128,1,1);
  -moz-box-shadow: 0 0 5px rgba(40,128,1,1);
  box-shadow: 0 0 5px rgba(40,128,1,1);
}

.box > .corner {
  width: 40px;
  height: 40px;
  background: #EFECCA;
  position: absolute;
  bottom: -5px;
  right: -5px;
}

<div class="box">
  <div class="corner"></div>
</div>

PS，下次发布一些代码。

Answer 2

以下是使用伪元素使用纯CSS实现的内容演示。

.corner {
  position: relative;
  padding: 40px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.corner:before,
.corner:after {
  display: block;
  position: absolute;
  width: 40px; /* border-left + border-top width = width Ie. (20px + 20px = 40px)*/
  height: 40px; /*Same applies here just picture two triangles forming a square*/
  bottom: -1px;
  right: -1px;
  content: "";
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
 /*You can reduce each border width here in both before and after pseudo-elements*/
.corner:before {
  border-top: solid 20px transparent;
  border-right: solid 20px #EEEEEE;
  border-left: solid 20px transparent;
  border-bottom: solid 20px #EEEEEE;
}
.corner:after {
  border-bottom: solid 20px transparent;
  border-left: solid 20px #B5B5B5;
  border-right: solid 20px transparent;
  border-top: solid 20px #B5B5B5;
}
.border-radius {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}
.border-radius:after {
  -webkit-border-radius: 10px 0 0 0;
  -moz-border-radius: 10px 0 0 0;
  -ms-border-radius: 10px 0 0 0;
  -o-border-radius: 10px 0 0 0;
  border-radius: 10px 0 0 0;
}

<div class="corner border-radius">
  <h2>Folded Corner Example</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sunt, quidem suscipit...</p>
</div>

修改

更改折叠尺寸示例：

.corner:before,
.corner:after {
  display: block;
  position: absolute;
  width: 20px; /* border-left + border-top width = width Ie. (20px + 20px = 40px)*/
  height: 20px; /*Same applies here just picture two triangles forming a square*/
  bottom: -1px;
  right: -1px;
  content: "";
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
 /*You can reduce each border width here in both before and after pseudo-elements*/
.corner:before {
  border-top: solid 10px transparent;
  border-right: solid 10px #EEEEEE;
  border-left: solid 10px transparent;
  border-bottom: solid 10px #EEEEEE;
}
.corner:after {
  border-bottom: solid 10px transparent;
  border-left: solid 10px #B5B5B5;
  border-right: solid 10px transparent;
  border-top: solid 10px #B5B5B5;
}

Answer 3

您还可以使用偏移位置和背景来隐藏阴影：

div {
  width:580px;
  margin:2em auto;
  box-shadow:0 0 3px;
  padding :1em;
  position:relative;
  border-radius:5px;
  background:lightgray;
}
div:after {
  content:'';
  position:absolute;
  border-radius:5px;
  /* offset equal to box-shadow size */
  bottom:-3px;
  right:-3px;
  /*whatever size */
  height:1.5em;
  width:1.5em;
  /*whatever colors*/
  background:linear-gradient(to bottom right, gray ,#333 50%, white 50%) ;
  /*eventually */
  box-shadow: 0 0 10px  1px white
}

<div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. </div>