Html 带有框阴影的 CSS 语音气泡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8866736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Speech Bubble with Box Shadow
提问by Lord Varlin
Creating a DIV that uses CSS to draw a triangle to the left. Trying to apply a uniform box-shadow to both parent and the pseudo element (see images) and code.
创建一个使用 CSS 向左绘制三角形的 DIV。尝试对父元素和伪元素（见图像）和代码应用统一的框阴影。
Is this possible? Or am I better off using border-image for this?
这可能吗？或者我最好为此使用边框图像？
(Top: Before Shadow, Middle: CSS Box-Shadow, Bottom: Desired Result)
（顶部：阴影之前，中间：CSS Box-Shadow，底部：期望的结果）
.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: "<div class="bubble"></div>
a0";
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;
}
回答by ThinkingStiff
Instead of using a triangle hack, you can just rotate a div using transformand get a real box-shadow. Since you only want the shadow on one side of the div (the visible triangle side), you have to make the blursmaller and lower the opacity.
您可以使用旋转 div 而不是使用三角形 hacktransform并获得一个真实的box-shadow. 由于您只想在DIV（可见三角形侧）一侧的阴影，你必须做出blur更小，降低了opacity。
Demo: http://jsfiddle.net/ThinkingStiff/mek5Z/
演示：http: //jsfiddle.net/ThinkingStiff/mek5Z/
HTML:
HTML：
.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: "<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>
a0";
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;
}
CSS:
CSS：
$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: "<div class="bubble">
<div class="triangle"></div>
<div class="border"></div>
<div class="content">some content</div>
</div>
a0";
display: block;
position: absolute;
top: 0px;
left: $nose_size;
height: $nose_size;
width: $nose_size;
-webkit-transform: skew( -45deg );
-moz-transform: skew( -45deg );
}
Output:
输出：
回答by mezis
Here is a complete working examplein full (S)CSS, with variables for nose size shadow width and an optional border.
这是一个完整的(S)CSS的完整工作示例，其中包含鼻子大小阴影宽度和可选边框的变量。
The trick is to get the offsets and transform right to achieve pixel-perfection, and to use overflow:hiddenas necessary to cut the nose of your bubble (especially if you need borders).
诀窍是获得正确的偏移和变换以实现像素完美，并overflow:hidden根据需要使用来切割气泡的鼻子（尤其是在需要边框时）。
The example in the answer above doesn't work for us because the shadow gets cropped and is laid over the main bubble area.
上面答案中的示例对我们不起作用，因为阴影被裁剪并覆盖在主要气泡区域上。
Degrades gracefully in IE7/8.
在 IE7/8 中优雅降级。
HTML:
HTML：
.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;
}
SCSS:
社会保障：
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;
回答by tuze
I know It's a little bit tricky but, seems nice to me. Here is the fiddle http://jsfiddle.net/dzfj6/
我知道这有点棘手，但对我来说似乎很好。这是小提琴http://jsfiddle.net/dzfj6/
HTML
HTML
##代码##CSS
CSS
##代码##Instead of box-shadow, you can simply use borderfor buble.
而不是box-shadow，您可以简单地使用borderbuble。
回答by Amir Raminfar
Another solution is to use filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));It only places the shadow around the objects shape.
另一种解决方案是使用filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));它只在对象形状周围放置阴影。
回答by Web tasar?m
Don't use box-shadow.
不要使用box-shadow.
