DIV+CSS圆角框组件

ahomeeye · 发表于 2013-2-7 19:03:54

<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>

		自动登录	找回密码
密码			立即注册