網(wǎng)頁(yè)特效代碼模板無憂>網(wǎng)頁(yè)特效>層和布局特效代碼>

CSS中1PX的使用—缺口提示框_層和布局特效

通過這個(gè)小實(shí)例，你會(huì)感覺到CSS中1px是多么的有用處，別以為那個(gè)小三角是用圖片平鋪出來的，其實(shí)完全是用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">
<head>
<title>帶缺口的提示框-/</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
<style>
 
.wrap{
	font-size: 12px;
	margin:40px auto;
	width:600px;
}
.ui-slider-tooltip{	/* CSS屬性順序按照 字母首字母 排列*/
	background:#FCFDFD; 
	border:1px solid green;
	color:#222222;
	display: block;
	text-align: center;
	padding: 5px 3px 5px 3px;
	width: 190px;	
	position: relative; 
}
.ui-corner-all {
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-top-left-radius:5px 5px;
	-webkit-border-top-right-radius:5px 5px;
	-webkit-border-bottom-right-radius:5px 5px;
	-webkit-border-bottom-left-radius:5px 5px;
}
.ui-tooltip-pointer-down {
	border-bottom-width: 0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid green;
	bottom:	-8px;
	display: block;
	height:0;
	left: 50%;
	margin-left: -7px;
	position: absolute; 
	width:0;
}

.ui-tooltip-pointer-down-inner {
	border-left: 6px dashed transparent; 
	border-right: 6px dashed transparent;
	border-top: 7px solid #fff;
	left: -6px;
	top: -9px;
	position: absolute; 
}

/**/
.a{
	display: block;width:0;height:0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid green;
	border-bottom: 0;
	position: absolute;
}
.b{
	position: absolute; 
	border-left: 6px dashed transparent; 
	border-right: 6px dashed transparent;
	border-top: 7px solid #fff;
	top: -9px;
	left: -6px;
}
</style>
</head>
<body>

<div class="wrap">
	<h1>用CSS實(shí)現(xiàn)帶缺口的提示框</h1>
	<span class="a">
		<span class="b"></span>
	</span>
	<br/>
	<span class="a">
		<span class="b" style="top:-11px;"></span>
	</span>
	<br/>

<br/>

<span class="ui-slider-tooltip  ui-corner-all">
		<span>你來到mb5u.com啦！</span>
		<span class="ui-tooltip-pointer-down">
			<span class="ui-tooltip-pointer-down-inner" ></span>
		</span>
	</span>

<p>加個(gè)背景顏色，你也許更能看清楚其中的奧秘。看到小三角上的白色了吧！！</p>

</div>
</div>
</body>
</html>

所屬頻道：層和布局特效/更新時(shí)間：2012-11-21

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)層和布局特效：

CSS中1PX的使用—缺口提示框_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些