首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

【转载】CSS圆角旋钮(一)

2012-06-28 
【转载】CSS圆角按钮(一)效果图:[笔者测试通过。IE6,7,8,火狐]第一章、基本的圆角框 实现原理:纯CSS方式实现圆

【转载】CSS圆角按钮(一)

效果图:[笔者测试通过。IE6,7,8,火狐]

第一章、基本的圆角框

实现原理:

纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了,下面这个示意图是我将其中的一个圆角进行放大后的效果。

【转载】CSS圆角旋钮(一)

从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的,每一个容器的宽度不同,这个宽度是由margin外边距来实现的,如:margin:0 5px;就是左右两侧的外边距5像素,从上到下有5条线,其外边距分别为5px,3px,2px,1px,依次递减。因此根据这个原理我们可以实现简单的html结构和样式。

?

1、Html结构层:

?

下面是源码演示后的截图:

【本文转载】转载连接:http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html

技术需要交流,分享,沟通 感谢无私的人。。让我站在巨人肩膀上

热点排行