Home > Article > Web Front-end > CSS实现自定义手型气泡提示_html/css_WEB-ITnose
CSS实现自定义手型气泡提示_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:36:52985browse
<strong>实现自定义的手型气泡提示</strong><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .test{ background: #CE5010 none repeat scroll 0% 0%; position: relative; border-radius: 20px; margin: 60px; height: 2em; text-align: center; float: left; color: white; padding-left: 10px; padding-right: 10px; padding-top: 5px; font-size: 12px; } .test span.bot{ width: 0; height: 0; font-size: 0; overflow: hidden; position: absolute; border-style: solid; left: 0px; border-color: transparent transparent transparent rgb(206, 80, 16); top: 18px; border-width: 12px; } </style> </head> <body> <div class="test"> <span class="bot"></span> CSS"边框法"实现气泡对话框效果，需要两个辅助span </div> </body> "" <html>
实现效果如下：
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：div中的内容垂直居中的五种方法_html/css_WEB-ITnoseNext article：CSS选择符总结(Selectors)_html/css_WEB-ITnose