css中的圆角样式布局一
在网页设计中，大多网页为了美观，都把区域的四角设计成给人一种圆滑的感觉，下面简单介绍两种圆角设计方法：<div id="lt"><div class="ss"> <div class="tt"><div class="ttl"></div><div class="ttr"></div></div> <div class="bb"> <div class="t1">标题</div> <div class="c" id="cc"> <!--内容--> </div> </div> <div class="ss"> <div class="tl"><div class="tll"></div><div class="tlr"></div></div> </div> </div></div> 下面是对应的css样式：
#lt{ float:left;width:200px;}.ss{ width:100%;position:relative;}.ttl,.ttr,.tll,.tlr{ background-image:url(/img/l.gif);background-repeat:no-repeat;overflow:hidden;position:absolute;font-size:1px;}#lt .ttl{ background-position:0 0;top:0;left:0;height:5px;width:5px;}#lt .ttr{ background-position:-11px 0;top:0;right:0;height:5px;width:5px;}.bb{ background:#c00;border:1px solid #000;border-bottom:0;}#lt .tll{ background-position:0 -3px;bottom:0!important;bottom:-1px;left:0;height:5px;width:5px;}#lt .tlr{ background-position:-7px -3px;bottom:0!important;bottom:-1px;right:0;height:5px;width:5px;}.tl{ height:7px;background:url(/img/r.gif) repeat-x;overflow:hidden;width:100%;}.t1{ padding-left:10px;height:20px;line-height:20px;font-size:12px;font-weight:bold;}.c{ background:#FFF;margin:-3px 5px;padding:3px 3px 5px 3px;zoom:100%;} 效果图如下所示：
http://dl.iteye.com/upload/attachment/159385/a17f533e-7922-3cfa-8347-7f210f38973d.jpg
页:
[1]