将 box-shadow 添加到非矩形的 div 中（使用边框半径）答案

【问题标题】：Adding box-shadow to a not-rectangle shaped div (playing with border-radius)将 box-shadow 添加到非矩形的 div 中（使用边框半径）
【发布时间】：2016-09-15 13:37:49
【问题描述】：

是否可以为非常规矩形的 div 添加均匀阴影？添加 box-shadow 与普通 div 的工作方式不同。这是我说的 div：

#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

【问题讨论】：

您是要制作边框效果还是实际阴影？
相关 - stackoverflow.com/questions/16237181/…
我正在尝试在整个 div 周围制作实际的阴影效果。现在，当我添加 box-shadow 效果时，它会在由边框组成的三角形的地方生成矩形形状的阴影。
是的，那会发生。请参阅链接的问题。除此之外，在三角形周围制作“边框/阴影”是一个额外的伪元素。如果您可以提供所需结果的图像，那将是理想的。
或者看看这个 - stackoverflow.com/questions/30299093/speech-bubble-with-arrow

标签： html css border shadow box-shadow

【解决方案1】：

是的，你可以。示例如下：

.circle { 
width:150px;
height:150px; 
border: solid 1px #555;
background-color: #eed; 
box-shadow: 10px -10px rgba(0,0,0,0.6); 
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6); 
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6); 
-o-box-shadow: 10px -10px rgba(0,0,0,0.6); 
border-radius:100px; 
}

<div class="circle">

</div>

【讨论】：