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

通过这个小实例，你会感觉到CSS中1px是多么的有用处，别以为那个小三角是用图片平铺出来的，其实完全是用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实现带缺口的提示框</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>加个背景颜色，你也许更能看清楚其中的奥秘。看到小三角上的白色了吧！！</p>

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

所属频道：层和布局特效/更新时间：2012-11-21

[收藏][报错][返回列表]

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

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些