我有悬浮时显示的泡泡状弹出窗口.我需要在气泡周围添加一个边框,但问题是我无法在气泡的指针上添加边框.
箭头由.bubble:after制作
你可以在这里查看小提琴http://jsfiddle.net/livewirerules/c2Lh6zv6/1/
下面是css
.bubble { display: none; z-index: 10; position: absolute; border:solid 1px red; text-align:center; top: 40px; left: -20px; width: 75px; height: 80px; padding: 0px; background: #FFFFFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .bubble:after { content: ''; position: absolute; border-style: solid; border-width: 0 15px 15px; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; margin-left: -15px; top: -15px; left: 50%; }
任何帮助将不胜感激
解决方法
尝试添加:before元素,创建与之相同的箭头:after,但要稍微大一点,然后选择红色.确保:之前是在你之后:之后它应该产生与你的箭头后边界相同的影响:
.bubble::before { content: ''; position: absolute; border-style: solid; border-width: 0 16px 16px; border-color: red transparent; display: block; width: 0; z-index: 1; margin-left: -16px; top: -16px; left: 50%; }
编辑:链接到正确的jsfiddle
revised fiddle
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。