带有阴影的CSS语音泡沫
创build一个使用CSS在左侧绘制三angular形的DIV。 试图对父类和伪元素（见图像）和代码应用统一的盒子阴影。
这可能吗？ 还是我最好使用边界图像呢？
（上：阴影前，中间：CSS盒阴影，下：理想结果）
.bubble{ height: 200px; width: 275px; opacity: 0; margin-top: 41px; float: right; background-color: #F2F2F2; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 0px 6px #B2B2B2; } .bubble::after { height: 0px; width: 0px; content: "\00a0"; display: block; margin-left: -10px; margin-top: 28px; border-width: 10px 10px 10px 0; border-style: solid; border-color: transparent #F2F2F2 transparent transparent; -webkit-box-shadow: 0px 0px 6px #B2B2B2; } 而不是使用三angular形黑客，你可以旋转一个div使用transform并得到一个真正的box-shadow 。 既然你只需要div的一边（可见的三angular形边）的阴影，你必须使blur更小，并降低opacity 。
演示： http : //jsfiddle.net/ThinkingStiff/mek5Z/
HTML：
<div class="bubble"></div>
CSS：
.bubble{ background-color: #F2F2F2; border-radius: 5px; box-shadow: 0px 0px 6px #B2B2B2; height: 200px; margin: 20px; width: 275px; } .bubble::after { background-color: #F2F2F2; box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 ); content: "\00a0"; display: block; height: 20px; left: -10px; position: relative; top: 20px; transform: rotate( 45deg ); -moz-transform: rotate( 45deg ); -ms-transform: rotate( 45deg ); -o-transform: rotate( 45deg ); -webkit-transform: rotate( 45deg ); width: 20px; }
输出：
这里是完整的（S）CSS 完整的工作示例 ，鼻子大小阴影宽度和可选边框的variables。
诀窍是获得偏移量，并将其转换为像素完美，并使用overflow:hidden根据需要overflow:hidden ，以切断泡沫的鼻子（尤其是在需要边框时）。
上面答案中的例子对我们来说不起作用，因为阴影会被裁剪掉，并被放置在主要的泡沫区域。
在IE7 / 8中优雅地降级。
HTML：
<div class="chat"> <div class="bubble"> <span class='tail'> </span> <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children.</p><p>And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p> </div> </div>
SCSS：
$shadow_radius = 6px; $nose_size = 12px; $shadow = 0 1px $shadow_radius #B2B2B2; $border = 1px solid #bbb .chat { font-family: sans-serif; font-size: small; } .bubble { background-color: #F2F2F2; border-radius: 5px; border: $border; box-shadow: $shadow; display: inline-block; padding: 10px 18px; margin-left: ($shadow_radius + $nose_size); margin-right: ($shadow_radius + $nose_size); position: relative; vertical-align: top; } .tail { position: absolute; top: $nose_size; left: -($shadow_radius + $nose_size); height: ($shadow_radius + $nose_size); width: ($shadow_radius + $nose_size); overflow: hidden; } .tail:before { border: $border; background-color: #F2F2F2; box-shadow: $shadow; content: "\00a0"; display: block; position: absolute; top: 0px; left: $nose_size; height: $nose_size; width: $nose_size; -webkit-transform: skew( -45deg ); -moz-transform: skew( -45deg ); }
我知道这有点棘手，但对我来说似乎很好。 这里是小提琴http://jsfiddle.net/dzfj6/
HTML
<div class="bubble"> <div class="triangle"></div> <div class="border"></div> <div class="content">some content</div> </div>
CSS
.bubble { height: 200px; width: 275px; float:right; margin-top: 41px; margin-left:11px; background-color: #f2f2f2; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 0px 5px #b2b2b2; position:relative; z-index:1; } .triangle { position:absolute; top:12px; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 10px solid #f2f2f2; margin-left:-9px; z-index:3; } .border { position:absolute; top:12px; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 10px solid #e0e0e0; margin-left:-10px; z-index:2; } .content{ padding:10px; }
你可以简单地使用border来代替布雷box-shadow 。
另一个解决scheme是使用filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); 它只放置物体形状周围的阴影。
不要使用box-shadow 。
height: 200px; width: 275px; float:right; margin-top: 41px; margin-left:11px; background-color: #f2f2f2; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 0px 5px #b2b2b2; position:relative; z-index:1;
