css实现简单圆角效果
作者:天驱 来源:Alipay UED 时间:2008-11-27 13:11:00
目前,我们要在网页中使用圆角效果,总是通过切图然后嵌套很多div,用背景来实现圆角效果。对于前端开发工程师来说,圆角的确是一个让人又爱又恨的东西,一方面顾及设计师追求的美观效果,另一方面又不得不增添很多工作投入。无意中看到别人写的一个用纯粹css来实现的圆角效果,研究了一下发现对于那些需求比较简单的圆角效果还是一种很好的方法。总结了一下,可以实现自适应的纯css圆角效果。
首先,我们看一下一般圆角的结构:
从下图可以明显看出圆角和直边的关系,其实把圆角放大之后可以看到圆角是由像素化的直边组成的:
于是就有了css实现圆角的思路,就是通过用1px 的水平线条来堆叠出圆角,其中border和background的颜色填充来实现圆角边框,同时设置不同的左右margin数值(以1px为基数)来实现错位,从而整体上实现了简单的圆角效果。
下面介绍一下代码:
html部分(思路是“头部+内容+底部”):
<div>
<b class="round">
<b class="round1"></b>
<b class="round2"></b>
<b class="round3"></b>
<b class="round4"></b>
<b class="round5"></b>
</b>
<div class="roundContent">
<!-- 显示内容区域 -->
我是内容 <br />
我是内容 <br />
我是内容 <br />
我是内容 <br />
</div>
<b class="round">
<b class="round5"></b>
<b class="round4"></b>
<b class="round3"></b>
<b class="round2"></b>
<b class="round1"></b>
</b>
</div>
通过<B>标签来模组建dom结构,上中下三部分拼合形成一个圆角整体。
css样式部分(主要是border颜色和margin数值):
<style type="text/css">
.round{display:block}
.round *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#e7ff94;
}
.round1{
margin:0 4px;
border:1px solid #ff2000;
background:#ff2000;/*头尾边框色*/
}
.round2{
margin:0 3px;
border:1px solid #ff2000;
}
.round3{
margin:0 2px;
border:1px solid #ff2000;}
.round4{
margin:0 1px;
border:1px solid #ff2000;}
.round5{
margin:0 1px;
border:1px solid #ff2000;
}
.round1,.round2,.round3,.round4,.round5{
border-top:none;
border-bottom:none;
}
.roundContent{
border-left:1px solid #ff2000;
border-right:1px solid #ff2000;/*左右边框色*/
background:#e7ff94;
padding:10px;
}
</style>
很容易看出这不是真正的圆角,没有很好的过渡效果,只是一定程度上模拟了圆角的实现原理。对于那些要求效果比较高的圆角和设计比较复杂的圆角来说不是很适用。
具体的效果如下:
demo文件在这里:点击查看
标签:圆角,自适应,css
0
投稿
猜你喜欢
CSS Menu导航菜单下载网站整理
2007-10-21 19:49:00
ASP程序直接连接MYSQL数据库
2008-10-03 12:13:00
重新认识视觉设计
2009-09-08 12:46:00
MySQL分页优化解析
2008-12-22 14:56:00
ASP:使用ImageMagickObject组件制作缩略图
2008-10-21 12:21:00
asp函数判断服务器是否安装了某种组件
2008-10-11 14:45:00
SQL Server中导入导出数据的三种方式
2008-11-28 15:53:00
轻松掌握怎样从Windows命令行启动MySQL
2009-02-23 17:18:00
Oracle与SQL Server数据库镜像对比
2009-03-25 14:27:00
SQLSERVER查询所有数据库名,表名,和字段名的语句
2012-01-29 18:07:44
jQuery 1.4新特性及其变化(上)
2010-01-18 16:33:00
JavaScript的私有成员
2009-03-25 20:45:00
Access中实现case when功能
2009-04-28 13:02:00
Div的浮动+循环(描述的不清楚,请看图)
2008-09-22 20:21:00
关于SQL中CTE(公用表表达式)(Common Table Expression)的总结
2012-08-21 10:22:21
MySQL UPDATE时主键冲突引发的思考
2008-06-21 17:00:00
了解CSS的查找匹配原理,让CSS更简洁、高效
2010-06-08 13:36:00
ASP实现GB2312字符与区位码的相互转换
2009-12-28 10:27:00
当视觉设计师遇上产品经理、开发工程师…[译]
2010-01-17 10:18:00
浅析网页色彩应用
2009-12-21 16:17:00