虽然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. java线程并发控制：ReentrantLock Condition使用详解

    本文摘自:http://outofmemory.cn/java/java.util.concurrent/lock-reentrantlock-condition java的java.util.con ...

  2. 阿里巴巴Java开发手册———个人追加的见解和补充（一）

    先上干货,<阿里巴巴Java开发手册>的下载地址 https://yq.aliyun.com/articles/69327?spm=5176.100239.blogcont69327.15 ...

  3. 在vi或者vim中显示行号

    1. 为了显示行号,在vi/vim编辑器中执行一下命令中的一条 :set number 或者 :set nu 2. 为了关闭行号,在vi/vim编辑器中执行下面命令 :set nu! 如果你想要每次启 ...

  4. php上线教程----阿里云下设值二级域名并将项目上线

    在工作中,我们需要在一个主机地址下分配多个域名来上线多个项目,但是怎么设置一个二级域名并且完成上线项目的,接下来我们就以阿里云为例演示整个上线流程 首先登陆你的阿里云,找到你的域名 点击解析,进入解析 ...

  5. 一张图看懂 JS 的事件机制

    一.为什么 JavaScript 单线程 假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了避免复杂性, JS ...

  6. linux-网络数据包抓取-tcpdump

    用法格式: tcpdump [-i 网卡]  [选项]  '表达式' 选项说明如下: -i:interface 监听的网卡. -nn:表示以ip和port的方式显示来源主机和目的主机,而不是用主机名和 ...

  7. 解决项目中找不到Maven Dependencies

    项目中找不到Maven Dependencies 正常的Maven项目应该是这样的 自己的项目中却没有Maven Dependencies,自己百度了, 发现解决不了,最后发现在.classpath和 ...

  8. 获取元素最终的background-color

    通常我们都会先获取元素,然后得到style对象获取对应的css属性值: 下面,假设我定义一个div并在css中给定了指定的background-color: 这里并没有考虑!important/内联的 ...

  9. iOS开发-APP测试基本流程

    1. UI 测试app主要核ui与实际设计的效果图是否一致:交互方面的问题建议,可以先与产品经理确认,确认通过后,才开始让开发实施更改或优化 2. 功能测试根据软件说明或用户需求验证App的各个功能实 ...

  10. Centos7 安装 zabbix3.2

    简介: Zabbix的一个很优秀的分布式监控服务器, 它有两部分组成: 1. “zabbix-server”用来收集并且在web端展示数据 2. “zabbix-agent”用来采集数据,发送给ser ...