Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > HTML Tutorial > body text

CSS实现自定义手型气泡提示_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:36:52

Original

987 people have browsed it

<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>

Copy after login

实现效果如下：

Related labels：

CSS实现自定义手型气泡提示

source：php.cn

Previous article：div中的内容垂直居中的五种方法_html/css_WEB-ITnose Next article：CSS选择符总结(Selectors)_html/css_WEB-ITnose

Statement of this Website

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