虽然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. hibernate中save（）、update（）、saveOrUpdate（）的区别

    save()方法很显然是执行保存操作的,如果是对一个新的刚new出来的对象进行保存,自然要使用这个方法了,数据库中没有这个对象. update()如果是对一个已经存在的托管对象进行更新那么肯定是要使用 ...

  2. angular : direative : autoResize textarea auto resize

    今天为大家推出自己的auto resize 指令功能. 目的:解决textarea在给height的问题. 参考源码:http://monospaced.github.io/angular-elast ...

  3. 每天一个Linux命令（11）--nl命令

    nl命令在Linux系统中用来计算文件中行号.nl可以将输出的文件内容自动的加上行号,其默认的结果与cat -n 有点不太一样,nl可以将行号做比较多的显示设计,包括位数与是否自动不起0等等的功能. ...

  4. 利用smarty模板（登录、有关信息操作等功能）

    smarty模板前提是:前端和后端是分开的,所以肯定会有很多的后台页面,php页面和html页面是分开存储的. (1)登录页面的编写也是分两个页面(后台和前端) 1.首先是后台的php页面,很简单只要 ...

  5. 寻找与疾病相关的SNP位点——R语言从SNPedia批量提取搜索数据

    是单核苷酸多态性,人的基因是相似的,有些位点上存在差异,这种某个位点的核苷酸差异就做单核苷酸多态性,它影响着生物的性状,影响着对某些疾病的易感性.SNPedia是一个SNP调査百科,它引用各种已经发布 ...

  6. React组件开发（一）初识React

    *React不属于MVC.MVVM,只是单纯的V层. *React核心是组件(提高代码复用率.降低测试难度.代码复杂度). *自动dom操作,状态对应内容. *React核心js文件:react.js ...

  7. 每天一个Linux命令 9

    Linux常用命令: 压缩命令:gzip 解压命令:gunzip 压缩命令:zip  解压命令:unzip 压缩命令:bzip2  解压命令:bunzip2 压缩打包命令:tar 1.命令名称:gzi ...

  8. 初次接触java中的递归算法

    一道关于兔子繁衍的编程题: 有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 自己考虑了挺久,思路出现了问题,甚至连 ...

  9. Android中的WebView实战详解（一）

    一.为什么要用WebView? 1.兼容已有的项目2.可动态更新 二.WebView怎样使用? WebView是一个控件,如在布局中设置: <WebView android:id="@ ...

  10. 深度剖析Spark分布式执行原理

    让代码分布式运行是所有分布式计算框架需要解决的最基本的问题. Spark是大数据领域中相当火热的计算框架,在大数据分析领域有一统江湖的趋势,网上对于Spark源码分析的文章有很多,但是介绍Spark如 ...