无忧技术网 - RSS订阅 
无忧技术网

一个常用的纯CSS实现边框圆角效果


作者:[佚名] - 发布:2010-8-21 17:21:01 - 来源:无忧技术网

以下是CSS部分
<style type="text/css">
#circular {background: transparent; margin:1em;}
#circular .xb0 {display:block; background:transparent; font-size:1px;}
#circular .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
#circular .xb1, .xb2, .xb3 {height:1px;}
#circular .xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #ccc; border-right:1px solid #ccc;}
#circular .xb1 {margin:0 5px; background:#ccc;}
#circular .xb2 {margin:0 3px; border-width:0 2px;}
#circular .xb3 {margin:0 2px;}
#circular .xb4 {height:2px; margin:0 1px;}
#circular .xbcontent {display:block; background:#fff; border:0 solid #ccc; border-width:0 1px;}
</style>

html部分
<div id="circular">
<b class="xb0"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xbcontent">
<table><tr><td>
<p>圆角内部文字内容</p>
<p>(内部使用表格更容易控制内部的布局)</p>
</td></tr></table>
</div>
<b class="xb0"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

责任编辑:liqwei
打印本页】【关闭本页】【返回列表
·上一篇:CSS查找BUG的10个顺口溜
·下一篇:几款CSS在线工具推荐
 文章评分
  • current rating
-5 -4 -3 -2 -1 0 +1 +2 +3 +4 +5
 相关文章
·[分析研究]打开率追踪邮件营销效果不够准确的原因是什么? (2015-07-13)
·[分析研究]评估电子邮件营销效果基本指标有哪些? (2015-01-23)
 相关评论
 站点最新文章 更多>> 
·[经典影音]弱点
·[经典影音]萨利机长
·[经典影音]天空之眼
·[管理知识]康奈尔笔记法,提高100%学习效率
·[管理知识]刘强东:我管75000人靠这4张表格
·[管理知识]跟壳牌学HSE管理
·[运营策划]编辑工作内容整理
·[至理名言]奋斗与决定
·[瀚海拾遗]盲人打灯笼之各家论道
·[搞笑段子]中国男足
 站点浏览最多 更多>> 
·[协议规范]http断点续传原理:http头 Range、…
·[JS/CSS/HTML]HTML 空格的表示符号 nbsp / en…
·[NoSQL]Mongo数据库简介
·[协议规范]什么是SPF记录?如何设置、检测SP…
·[协议规范]图解 HTTPS 通信过程
·[PHP]精选国外免费PHP空间推荐
·[程序综合]常用IP地址查询接口
·[程序综合]什么是 DNS Prefetch ?
·[程序综合]获取客户端IP地址的三个HTTP请求…
·[Linux]/usr 目录的由来