虽然css3的border-radius实现圆角很简单，但是我还是认为css2.1中好多技术还是很值得学习的，我也是后来才知道这就是传说中的滑动门技术。脑洞大开啊

附上demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        /* 水平固定，垂直可拉伸圆角，核心设置大盒子固定宽度，并给大盒子一个底部背景。给标题一个顶部背景，高度由段落撑开，通过设置标题和段落的内边距达到需要的样式 */

        .box{

            width: 418px;

            background: teal url('img/bottom.gif') no-repeat bottom left;

        }

        .box h3{

            background: teal url('img/top.gif') no-repeat top left;

            padding: 20px 20px 0 20px;

        }

        .box p{

            padding: 0 20px 10px 20px;

        }

        /* 大盒子设置了固定框度，标题有一个顶部背景，段落有一个底部背景，中间的有一个平铺背景，这样就能实现带有渐变效果的边框 */

        .box2{

            width: 424px;

            background: url('img/tile2.gif') repeat-y;

            /* background: #f3f3f3; */

        }

        .box2 h3{

            background: url('img/top2.gif') no-repeat top left;

            padding: 20px 20px 0 20px;

        }

        .box2 .p2{

            background: url('img/bottom2.gif') no-repeat bottom left;

            padding: 0 20px 10px 20px;

        }

        /* 滑动门技术，四个图片，四个div:左下圆角大背景 ，右下圆角大背景，左上圆角小背景，右上圆角超小背景，小背景压在大背景的上面，顺序很重要*/

        .box3 {

            width: 30em;

            /* 左下圆角大背景 */

            background: url('img/bottom-left.gif') no-repeat bottom left ;

        }

        .box3 .outer {

            /* 右下圆角大背景 */

            background: url('img/bottom-right.gif') no-repeat bottom right;

        }

        .box3 .inner {

            /* 左上圆角小背景 */

            background: url('img/top-left.gif') no-repeat top left;

        }

        .box3 h3 {

            /* 右上圆角超小背景 */

            background: url('img/top-right.gif') no-repeat top right;

            padding: 20px 20px 0 20px;

        }

        .box3 p {

            padding: 0 20px 10px 20px;

        }

        /* 多图背景顺序：右上，左上，右下，左下 */

        .box4 {

            width: 15em;

            background-image:

            url('img/top-right.gif'),

            url('img/top-left.gif'),

            url('img/bottom-right.gif'),

            url('img/bottom-left.gif');

            background-repeat:

            no-repeat,

            no-repeat,

            no-repeat,

            no-repeat;

            background-position:

            top right,

            top left,

            bottom right,

            bottom left;

        }

        .box4 h3{

            padding: 20px 20px 0 20px;

        }

        .box4 p{

            padding: 0 20px 10px 20px;

        }

    </style>

</head>

<body>

    <div class="box">

        <h3>这是一个标题</h3>

        <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>

    </div>

    <div class="box2">

        <h3>这是一个标题</h3>

        <p class="p2">这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>

    </div>

    <div class="box3">

        <div class="outer">

        <div class="inner">

        <h3>这是一个标题</h3>

        <p class="p3">这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>

        </div>

        </div>

    </div>

    <!-- 利用css3实现的滑动门 -->

    <div class="box4">

        <h3>这是一个标题</h3>

        <p class="p4">这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>

    </div>

</body>

</html>

我觉得我写的注释只有我自己能看懂，哈哈哈哈，这个案例的图片设计的很有技巧，一般人真想不到，可通过审查元查看图片的样子，演示地址：http://down.yesyes.wang/book/04/radius.html

css2.1实现圆角边框的更多相关文章

  1. iOS开发小技巧 -- tableView-section圆角边框解决方案

    [iOS开发]tableView-section圆角边框解决方案 tableView圆角边框解决方案 iOS 7之前,图下圆角边框很容易设置 iOS 7之后,tableviewcell的风格不再是圆角 ...

  2. Android布局实现圆角边框

    首先,在res下面新建一个文件夹drawable,在drawable下面新建三个xml文件:shape_corner_down.xml.shape_corner_up.xml和shape_corner ...

  3. css圆角边框

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

  4. CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影

    圆角边框: border-radius    一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...

  5. Border-radius属性--设置圆角边框

    border-radius:该属性允许您为元素添加圆角边框! div { border:2px solid; border-radius:25px; -moz-border-radius:25px; ...

  6. css3学习总结2--CSS3圆角边框

    绘制一个圆角边框的示例 .div{ border: solid 5px blue; border-radius: 20px; -moz-border-radius:20px; -o-border-ra ...

  7. css3圆角边框，边框阴影

    border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...

  8. Swing圆角边框的实现

    Swing圆角边框的实现方法: package com.justplay.basic; import java.awt.Color; import java.awt.Component; import ...

  9. css3：border-radius圆角边框详解 (变圆 图片)

    转:http://www.kuqin.com/shuoit/20141014/342620.html border-radius:50% 今天来聊聊这个border-radius属性,radius的英 ...

随机推荐

  1. CREELINKS平台_处理器CeGpio资源使用说明(CeGpio的配置与使用)

    0x00 CREELINKS平台简介     CREELINKS(创e联)是由大信科技有限公司研发,集合软硬件.操作系统.数据云储存.开发工具于一体,用于物联网产品的设计.研发与生产的平台.    平 ...

  2. linux下php调试工具xdebug安装配置

    xdebug简介 Xdebug是php的一款调试工具,是基于zend的一个扩展,可以用来跟踪,调试和分析PHP程序的运行状况.如变量,函数调试,性能监测,代码覆盖率等 xdebug安装 1.下载xde ...

  3. 关于rem的使用和less编译工具考拉

    前提: 1.使用rem的前提是首先要设置好页面的根节点的大小: <script> (function(){ var html = document.documentElement; var ...

  4. Finding distance between two curves

    http://answers.opencv.org/question/129819/finding-distance-between-two-curves/ 问题: Hello, Im trying ...

  5. JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...

  6. 【WCF】错误处理（一）：FaultException 与 FaultReason 的搭配

    这里所说的错误处理主要是指服务代码中抛出的异常,即开发人员主动抛出的错误当然,由于网络问题或者配置不正确,会引发连接超时的错误,但这里老周要说的是,我们在实现服务逻辑时主动抛出的异常,尤其是对客户端传 ...

  7. nginx配置之深入理解

    继上一篇<debian+nginx配置初探--php环境.反向代理和负载均衡>成功之后,有点小兴奋,终于不用整lvs那么复杂来搞定负载,但还是有很多概念没弄清楚. 什么是CGI.FastC ...

  8. 获取bing图片并自动设置为电脑桌面背景（C++完整开源程序）

    众所周知,bing搜索网站首页每日会更新一张图片,张张漂亮(额,也有一些不合我口味的),特别适合用来做电脑壁纸. 我们想要将bing网站背景图片设置为电脑桌面背景的通常做法是: 上网,搜索bing 找 ...

  9. resin远程调试配置，connection refused问题解决

    http://john521.iteye.com/blog/1879805 这篇博客中讲的很好. 我在配置的过程中遇到了几个问题,记录一下: 1. 调试服务器监听的端口号,百度的开发机都限制了端口在某 ...

  10. eclipse中以debug方式启动tomcat报错

    在eclipse中debug  Tomcat报错,错误如下: FATAL ERROR in native method: JDWP No transports initialized, jvmtiEr ...