纯CSS实现的气泡提示框

2024-09-05 12:18:23

字体：大中小

来源：转载

供稿：网友

纯CSS的气泡提示框，气泡提示框，虽然不是圆角，但用CSS实现已经很不错了，希望大家喜欢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><html><head><meta charset="utf-8" /><meta name="author" content="GBin1.com" /><title>纯CSS实现气泡提示</title><style type="text/css">			body{				font-size:14px;				font-family:arial;				background: #CCC;			}						#container{				margin: 0 auto;				width: 600px;				padding-top: 10px;			}						h1{				font-size: 28px;				margin: 50px;			}						/* bubble */			.tip-bubble {			  position: relative;			  background-color: #202020;			  width: 100px;			  padding: 20px;			  color: #CCC;			  text-align: center;			  border-radius: 10px;			  margin: 50px;			  border: 1px solid #111;			  box-shadow: 1px 1px 2px #202020;			  -moz-box-shadow: 1px 1px 2px #202020;			  -webkit-border-shadow: 1px 1px 2px #202020;			  text-shadow: 0px 0px 15px #fff;			}			 			.tip-bubble:after {			  content: '';			  position: absolute;			  width: 0;			  height: 0;			  border: 15px solid;			}			 			/* Position the Arrow */			.tip-bubble-top:after {			  border-bottom-color: #202020;			  left: 50%;			  bottom: 100%;			  margin-left: -15px;			}			.tip-bubble-right:after {			  border-left-color: #202020;			  left: 100%;			  top: 50%;			  margin-top: -15px;			}			 			.tip-bubble-bottom:after {			  border-top-color: #202020;			  top: 100%;			  left: 50%;			  margin-left: -15px;			}			 			.tip-bubble-left:after {			  border-right-color: #202020;			  top: 50%;			  right: 100%;			  margin-top: -15px;			}        </style>    </head>    <body><div id="container"><h1>Bubble Tips by CSS</h1><div class="tip-bubble tip-bubble-left">Welcome To Our Site</div><div class="tip-bubble tip-bubble-right">www.baidu.com</div><div class="tip-bubble tip-bubble-bottom">Arrow on bottom</div></div></body></html>

下一篇：网页宽屏和窄屏无刷新切换效果

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注