如何制作带有边框的纯CSS气泡? [英] How can I make a CSS only speech bubble with a border?
问题描述
我想制作一个仅CSS的气泡.到目前为止,我有这个...
示例
CSS
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -15px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
jsFiddle .
...这几乎是我想要的.但是,我希望整个物体周围都有一个浅色边框.
很明显,在主要部分上,只需将border: 1px solid #333
添加到div
即可.
但是,由于气泡的尾巴是 border hack ,因此我无法为其添加边框.
我尝试将框阴影设置为0 0 1px #333
,但是浏览器将边框应用于元素的矩形形状(我想这是他们应该要做的事情).
jsFiddle .
我的下一个想法是找到一个看起来像气泡尾巴的Unicode字符并将其绝对定位在其中,以text-shadow
为边框,并使用主气泡的z-index
隐藏文本的顶部阴影.>
哪种Unicode字符适合于此?我应该做些不同的事情吗?我需要求助于图像吗?
我只需要支持Mobile Safari. :)
<div>Hello Stack Overflow!<span></span></div>
div span:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -51px;
margin-left: -15px;
border-width: 20px 20px 30px 20px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
I want to make a CSS only speech bubble. So far, I have this...
Example
CSS
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -15px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
...which is almost exactly what I want. However, I want a light border around the whole thing.
Obviously, on the main portion, that is simple as adding border: 1px solid #333
to the div
.
However, as the tail of the bubble is a border hack, I can't user a border with it.
I tried setting a box shadow of 0 0 1px #333
but browsers apply the border to the rectangular shape of the element (which I guess is what they should do).
My next thoughts were finding a Unicode character that looks like a bubble tail and absolutely positioning it there, with text-shadow
for the border and using z-index
of the main bubble to hide the top shadow of the text.
What Unicode character would be suitable for this? Should I do something different? Do I need to resort to an image?
I only have to support Mobile Safari. :)
<div>Hello Stack Overflow!<span></span></div>
div span:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -51px;
margin-left: -15px;
border-width: 20px 20px 30px 20px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
这篇关于如何制作带有边框的纯CSS气泡?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!