哪种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;} http://jsfiddle.net/QYH5a/ I want to make a CSS only speech bubble. So far, I have this...ExampleCSSdiv { 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....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).jsFiddle.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;}http://jsfiddle.net/QYH5a/ 这篇关于如何制作带有边框的纯CSS气泡?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
09-05 14:36
查看更多