热门文章 | 热门软件| 热门源码 | 热门电影 | 知识库 | 联系我们
软件 源码 教程 影视 健康 招聘
  HTML | JavaScript | ASP | PHP | JSP | NET | VB | VC | VF | Windows | Linux | Mysql | Mssql | Oracle | Struts 
当前位置: 创世纪计算机资源网 -> 文章频道 ->css 
站内搜索:
一个CSS圆角效果
作者:luanyumail 来源:bbs 整理日期:2007-10-30

<style type="text/css">
<!--
#ibox01 {
 overflow: hidden;
 height: 1px;
 margin-right: 5px;
 margin-left: 5px;
 background-color: #CC0000;
}
#ibox02 {
 height: 1px;
 margin-right: 3px;
 margin-left: 3px;
 border-right-width: 2px;
 border-left-width: 2px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #CC0000;
 border-left-color: #CC0000;
 overflow: hidden;
}
#ibox03 {
 height: 1px;
 margin-right: 2px;
 margin-left: 2px;
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #CC0000;
 border-left-color: #CC0000;
 overflow: hidden;
}
#ibox04 {
 overflow: hidden;
 height: 1px;
 margin-right: 1px;
 margin-left: 1px;
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #CC0000;
 border-left-color: #CC0000;
}
#ibox05 {
 overflow: hidden;
 height: 1px;
 margin-right: 1px;
 margin-left: 1px;
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #CC0000;
 border-left-color: #CC0000;
}
#boxcon {
 border-right-width: 1px;
 border-left-width: 1px;
 border-right-style: solid;
 border-left-style: solid;
 border-right-color: #CC0000;
 border-left-color: #CC0000;
}
.testlayer {
 height: 200px;
 width: 300px;
}
.testboxbg {
 background-color: #666666;
}
.testboxcon {
 height: 190px;
 background-color: #666666;
 position: relative;
}
-->
</style>
<div class="testlayer">
<div id="ibox">
  <div id="ibox01" class="testboxbg"></div>
  <div id="ibox02" class="testboxbg"></div>
  <div id="ibox03" class="testboxbg"></div>
  <div id="ibox04" class="testboxbg"></div>
  <div id="ibox05" class="testboxbg"></div>
  <div id="boxcon" class="testboxcon"></div>
  <div id="ibox05" class="testboxbg"></div>
  <div id="ibox04" class="testboxbg"></div>
  <div id="ibox03" class="testboxbg"></div>
  <div id="ibox02" class="testboxbg"></div>
  <div id="ibox01" class="testboxbg"></div>
</div>
</div>

做到圆角样式可以重复使用,并且不同包含内容用不同的Class进行设置,可以更换背景

样式.testboxcon 用了一个“相对”定位,主要是给里面的多个内容定位做一个参考

最外面的div class=“testlayer” 主要是在在大布局时给圆角一个“区域”

这个圆角在FF中,可以兼容显示

另外,建议大家在做圆角的时候,最好把弧度控制在5*5px的区域内,10px弧度不好看,而且计算起来比较麻烦

相关文章
暂无