Html CSS框阴影部分透明？

我有一个四面都有阴影的div。然而，在div的下角，我放置了一个背景图像png，使该角看起来像它的折叠。有没有一种方法可以使下角的长方体阴影透明？或者有没有其他办法

谢谢，解释一下

您可以将“位置：绝对”和“负底部和左侧”属性设置为相对于父元素框的角点和“位置：相对”，以存档此属性

假设这是你的盒子，里面是角落

因此，我们的角落将有底部：-5px和右侧：-5px

记住，我们需要一个有位置的角落：绝对

和位置为：relative的父对象

使用底部和左侧属性对此进行存档

演示|片段

身体{ 背景：EFECCA； 填充：20px； } .盒子{ 宽度：50%； 高度：150像素； 位置：相对位置； 背景：fff； -webkit盒阴影：0 0 5px RGBA40128,1,1； -moz盒阴影：0 0 5px RGBA40128,1,1； 盒影：0 0 5px RGBA40128,1,1； } .box>.corner{ 宽度：40px； 高度：40px； 背景：EFECCA； 位置：绝对位置； 底部：-5px； 右：-5px； }

---

下面是一个演示，演示了使用伪元素使用纯CSS实现的功能

.拐角处{ 位置：相对位置； 填充：40px； 背景色：ffffff； 边框：1px实心中交； } .拐角处：之前， .拐角处：之后{ 显示：块； 位置：绝对位置； 宽度：40px；/*左边框+边框顶部宽度=宽度，即20px+20px=40px*/ 高度：40px；/*这里同样适用，只需画两个三角形组成一个正方形*/ 底部：-1px； 右：-1px； 内容：； -webkit框大小：边框框； -moz框大小：边框框； 框大小：边框框； } /*您可以在这里减少伪元素前后的每个边框宽度*/ .角落：以前{ 边框顶部：实心20px透明； 右边框：实心20px EEEE； 左边框：实心20px透明； 边框底部：实心20px EEEE； } .拐角处：之后{ 边框底部：实心20px透明； 左边框：实心20px B5； 右边框：实心20px透明； 边框顶部：实心20px B5； } .边界半径{ -webkit边界半径：10px； -moz边界半径：10px； -ms边界半径：10px； -o-边界半径：10px； 边界半径：10px； } .边界半径：后{ -webkit边界半径：10px 0； -moz边界半径：10px 0； -ms边界半径：10px 0； -o-边界半径：10px0； 边界半径：10px0； } 折叠角示例 Lorem ipsum dolor sit amet，奉献精英。康莫迪，桑特，奎登·苏西比特

---

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

div{ 宽度：580px； 利润率：2米自动； 盒影：0 3px； 填充：1em； 位置：相对位置； 边界半径：5px； 背景：浅灰色； } 部门：之后{ 内容：； 位置：绝对位置； 边界半径：5px； /*偏移量等于框阴影大小*/ 底部：-3px； 右：-3px； /*不管大小*/ 高度：1.5em； 宽度：1.5em； /*不管什么颜色*/ 背景：线性渐变至右下角，灰色，333 50%，白色50%； /*最终*/ 长方体阴影：0 0 10px 1px白色 }

---

佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯·普莱斯特拉特·埃利芬德·利奥。如果你的角是正方形的，并且位置绝对，底部为0，右侧为0，是什么阻止你这样做的：底部：-3px，右侧：-3px，其中3px是，我猜应该是你的阴影大小。哦，好的，我想我明白了。你是说图像将覆盖阴影吗？框阴影是蓝色框周围的细绿线吗？嗨，Max，框阴影是围绕白色容器/div的。如果你看右下角，你可以看到它是圆形的，但是，我不想这样，因为png图像复制了一个折叠，@Everettss说这是一个好建议，但是只有在你的特定情况下：你不使用父背景图像，2：希望你不关心代码的可重用性。里卡多：太棒了，谢谢，有一个问题是，有可能缩小折叠的尺寸吗？当然有可能！让我编辑我的答案，以澄清在何处更改尺寸。

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

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

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

.box > .corner {
  position: absolute;
}

.box {
  position: relative;
}