`

DIV+CSS圆角框组件

divhtmlcss 
阅读更多 
<html>
<head>
<title>DIV+CSS圆角框组件</title>
<style type="text/css">

/*原理：由左右边框长度、左右缩进以及溢出隐藏实现。*/
/*高度由div的width决定*/
div#sidebar_f {
	margin: 0;
	padding: 0;
	float: left;
	width: 800px;
	text-align: center;
}

div#sidebar {
	
}

div.linetop,div.linebottom,div.line1,div.line2,div.line3 {
	overflow: hidden;
	display: block;
}

div.linetop {
	margin: 0 5px;
	height: 1px;
	border-bottom: 1px solid;
}

div.linebottom {
	margin: 0 5px;
	height: 1px;
	border-top: 1px solid;
}

div.line1 {
	margin: 0 3px;
	height: 1px;
	border-left: 2px solid;
	border-right: 2px solid;
}

div.line2 {
	margin: 0 2px;
	height: 1px;
	border-left: 1px solid;
	border-right: 1px solid;
}

div.line3 {
	margin: 0 1px;
	height: 2px;
	border-left: 1px solid;
	border-right: 1px solid;
}

/*高度由middle的height决定*/
div.middle {
	margin: 0 0;
	height: auto;
	border-left: 1px solid;
	border-right: 1px solid;
}

/*设置背景颜色*/
div.middle,div.line1,div.line2,div.line3 {
	background-color: #F8F8F8;
}

/*设置边框颜色*/
div.linetop,div.linebottom,div.middle,div.line1,div.line2,div.line3 {
        border-color: #7F9DB9;
}
</style>

</head>

<body>

			<div id="sidebar_f">
				<div class="linetop"></div>
				<div class="line1"></div>
				<div class="line2"></div>
				<div class="line3"></div>
				<div class="middle" id="sidebar">
					这是内容。
				</div>
				<div class="line3"></div>
				<div class="line2"></div>
				<div class="line1"></div>
				<div class="linebottom"></div>
			</div>

</body>
</html>



分享到：
| CSS 语法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics