純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="http://www.survivalescaperooms.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   class="iwvjtn8m0"   id="container"><h1>Bubble Tips by CSS</h1><div   id="iwvjtn8m0"   class="tip-bubble tip-bubble-left">Welcome To Our Site</div><div   id="iwvjtn8m0"   class="tip-bubble tip-bubble-right">www.baidu.com</div><div   id="iwvjtn8m0"   class="tip-bubble tip-bubble-bottom">Arrow on bottom</div></div></body></html>

下一篇：網頁寬屏和窄屏無刷新切換效果