有样式的tips

跳至 [1] [2] [3] [全屏预览]

@charset "utf-8";
/* CSS Document */
/* ljtips 1.0 */
/* lujun [e-mail]*/
/* 2010-10-8*/
.lj-tipsWrap,.lj-in,.lj-close {
	display: inline-block;
	color: #fff
}

.lj-tipsWrap {
	background: #000;
	filter:alpha(opacity=60);-moz-opacity:0.6; -khtml-opacity:0.6;
	opacity : 0.6;
	line-height: 1.6em;
	padding: 10px 15px;
	position: absolute;
	text-align: left;
	text-align: left;
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

.lj-in {
	position: absolute;
	zoom: 1;
	border: 10px dashed transparent;
	width: 0px;
	height: 0px;
}

.lj-in span {
	zoom: 1;
	width: 0px;
	height: 0px;
	overflow: hidden;
}

.lj-close {
	position: absolute;
	text-decoration: none;
	color: #fff;
	font-size: 14px;
	height: 9px;
	width: 9px;
	overflow: hidden;
	line-height: 0.5em;
	right: 0;
	top: 0;
}

.lj-close:hover {
	color: red;
}

.lj-top {
	border-top: 10px solid #000;
	bottom: -20px;
	left: 3px;
}

.lj-top span {
	border-top: 10px solid #000;
	margin: -11px 0 0 -10px;
}

.lj-right {
	border-right: 10px solid #000;
	left: -20px;
	top: 3px;
}

.lj-right span {
	border-right: 10px solid #000;
	margin: -10px 0 0 -9px;
}

.lj-bottom {
	border-bottom: 10px solid #000;
	top: -20px;
	left: 3px;
}

.lj-bottom span {
	border-bottom: 10px solid #000;
	margin: -9px 0 0 -10px;
}

.lj-left {
	border-left: 10px solid #000;
	right: -21px;
	top: 3px;
}

.lj-left span {
	border-left: 10px solid #000;
	margin: -10px 0 0 -11px;
}

.lj-left  ~ .lj-close {
	left: 0;
}
/*css 3 渐进增强*/
.lj-tipsWrap {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}