带有阴影的CSS语音泡泡

问题描述：

创建一个使用CSS在左侧画一个三角形的DIV。试图对父代和伪元素（见图像）和代码应用统一的盒子阴影。带有阴影的CSS语音泡泡

这可能吗？或者我最好使用边界图像呢？

（上图：前阴影中：CSS的box-shadow，底部：所需的结果）

Elements Before Box-Shadow is added

Elements with box-shadow added

The desired result

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

答

而不是使用三角破解，你可以使用transform旋转一个div，并得到一个真正的box-shadow。既然你只想要div的一侧（可见的三角形侧）的阴影，你必须使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; 
}

输出：

enter image description here

@LordVarlin我最近使用它的iPhone后退按钮，所以我不必使用图像。为了更好玩，你可以使用'transform：skew（）;'来改变三角形的角度。 – ThinkingStiff 2012-01-15 06:02:10

我用Firefox 14检出了Fiddle，它显示了一个矩形而不是三角形。这是为什么？在FF14中支持转换CSS，对吧？ – thomthom 2012-08-14 09:59:25

原来是Firefox不喜欢的歪斜转换... – thomthom 2012-08-14 10:04:41

答

我知道这是一个有点棘手但是，对我来说似乎很好。这里是小提琴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; 
}

相反的box-shadow，你可以简单地使用border的布雷。

答

不要使用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;

答

这里是全（S）的CSS complete working example，与变量鼻子大小的阴影宽度和一个可选的边界。

诀窍是获得偏移量并将其转换为完美像素，并根据需要使用overflow:hidden来削减泡泡的鼻子（尤其是在需要边框时）。

上面的答案中的示例对我们不起作用，因为阴影被裁剪并放置在主泡区域。

在IE7/8中优雅地降级。

HTML：

<div class="chat"> 
    <div class="bubble"> 
     <span class='tail'>&nbsp;</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); 
}

答

另一种解决方案是使用filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));它只会将周围的物体形状的影子。

带有阴影的CSS语音泡泡

相关推荐