`

CSS实例(3):打造纯CSS完美圆角

阅读更多
纯CSS圆角,真的是很完美,方法也很简单,并且自己可以随意改变圆角弧度大小。
HTML------------------------------------------------------------------------------
<div id="all">
        <b class="r1"></b>
        <b class="r2"></b>
        <b class="r3"></b>
        <b class="r4"></b>
        <div class="content"></div>
        <b class="r4"></b>
        <b class="r3"></b>
        <b class="r2"></b>
        <b class="r1"></b>
</div>

CSS--------------------------------------------------------------------------------
#all{width:400px;}
.content{ height:200px; }
b{display:block; overflow:hidden; height:1px;}
.r1{margin:0 4px; background:#ff6600;}
.r2,.r3,.r4,.content{border-left:1px solid #ff6600; border-right:1px solid #ff6600; clear:both;}
.r2{margin:0 3px;}
.r3{margin:0 2px;}
.r4{margin:0 1px;}

分享到:
评论

相关推荐

    iecss3.htc支持输入框圆角

    支持IE页面输入框圆角,完美解决。记得阅读里面的文档帮助

    css 圆角实现例子

    css 圆角实现例子,无图实现CSS圆角

    css圆角实例.zip

    css圆角实例 The header and footer elements are typically empty and serve primarily as hooks for the corners in CSS, but could easily be extended.

    纯CSS3圆角按钮

    目前CSS3的应用已经越来越普及了,它最常见的一个圆角功能非常的不错,可以省略掉不少图片从而直接用代码实现按钮的渐变、描边、阴影等效果,本实例就是一款直接用CSS3实现的,无需其他任何JS或者flash、亦不需任何...

    css3 支持ie8以下圆角

    DIVCSS5圆角实例 CSS3版本圆角实例, 支持低版本IE6-IE9浏览器

    CSS3+HTML5实现圆角【WEB前端】

    CSS3圆角详解 一、CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量。图片文件的生成、更新...

    CSS制作圆角矩形实例

    现在网页上用到圆弧的地方一般都是图片,这里介绍一种用CSS作的圆角矩形,用编程的方法在网页上生成圆弧。一开始在网上发现圆弧不是图片的时候真的惊呆了,后来就仔细研究了别人做的东西,终于弄明白了,大家只要看...

    无图片CSS圆角的五个实例

    无图片 CSS 圆角的 五个实例

    css+div圆角实例

    css+div圆角实例,通过JavaScript实现,内含多种实例

    css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

    一、图片实现圆形条件  原本不是圆形图片,通过CSS样式布局... 三、CSS圆角实现图片圆形实例  首先一张正方形图片,放入一个DIV盒子内,通过对盒子内图片设置border-radius:50%实现圆形效果。  本案例在DIVCSS5初始

    css特例 九宫格 圆角实例

    使用九宫格布局,达到网页中圆角的效果。 提供九宫格布局实例及所需的图片

    纯css实现边框圆角效果

    纯css 实现边框圆角实例,不使用图片,时候所有浏览器.

    css实例 包括 布局 菜单 下拉菜单 导航条 圆角框等

    这是一个css实例集合里面包括布局、菜单、下拉菜单、导航条、圆角框等范例

    Div圆角边框CSS实例下载.rar

    Div圆角边框CSS实例下载,用图片修饰而成的圆角,虽然用了图片,不过新手容易上手,特别是对DIV css不熟悉的朋友,更易套用在自己的网站里,做留言本或评论系统超不错哦!由源码素材网提供下载,谢谢你的支持。

    CSS3自适应文字的圆角菜单.rar

    CSS3 jQuery结合实现,这里的圆角是指图片的边框修饰成了圆角,看上去很不错的图文菜单,响应鼠标滚动的功能,从操作体验上来说,十分舒服,也很灵敏,滚动幅度掌握的相当好,通过本实例你也了解下CSS3下使用jQuery...

    css经典实例

    css经典实例 包括圆角

    css各种高级实例+源码

    CSS核心基础 第0课《CSS设计彻底研究》简介 CSS与(X)HTML核心基础(上) CSS与(X)HTML核心基础(中) CSS与(X)HTML核心基础(下) CSS禅意花园介绍 深入CSS盒子模型 深入理解盒子模型(上) 深入理解盒子模型(下) ...

    PHP实例开发源码-CSS圆角制作器 php版.zip

    PHP实例开发源码—CSS圆角制作器 php版.zip PHP实例开发源码—CSS圆角制作器 php版.zip PHP实例开发源码—CSS圆角制作器 php版.zip

    css 圆角边框 样式表

    css 圆角边框 样式表 css 圆角边框原理及网页实例

Global site tag (gtag.js) - Google Analytics