虽然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. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  2. Ioc容器BeanPostProcessor－Spring 源码系列（3）

    Ioc容器BeanPostProcessor-Spring 源码系列(3) 目录: Ioc容器beanDefinition-Spring 源码(1) Ioc容器依赖注入-Spring 源码(2) Io ...

  3. <context:component-scan>详解

    默认情况下,<context:component-scan>查找使用构造型(stereotype)注解所标注的类,如@Component(组件),@Service(服务),@Control ...

  4. （Jquery）避免数据相加小数点后产生多位数和计算精度损失

    /** * 加法运算,避免数据相加小数点后产生多位数和计算精度损失. * * @param num1加数1 | num2加数2 */ function numAdd(num1, num2) { var ...

  5. click延时300ms的故事

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题 ...

  6. PHP学习2 — PHP Cookie 与 Session

    PHP Cookies cookie 常用于识别用户.cookie 是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie.通过 PHP,您能够创建并取回 ...

  7. Linux学习之Linux目录及文件系统

    以往的 Windows 一直是以存储介质为主的,主要以盘符(C 盘,D 盘...)及分区来实现文件管理,然后之下才是目录,目录就显得不是那么重要,除系统文件之外的用户文件放在任何地方任何目录也是没有多 ...

  8. 一道面试题引发的对javascript类型转换的思考

    最近群里有人发了下面这题:实现一个函数,运算结果可以满足如下预期结果: add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 对 ...

  9. Debian安装Oracle Java步骤

    在Debian下安装OpenJDK使用apt命令非常方便的安装,但安装Oracle就需要手动了,这里需了解ln和update-alternatvies命令. ln链接 首先我们来说说linux的链接, ...

  10. 查找第K小数

    题目描述 查找一个数组的第K小的数,注意同样大小算一样大. 如  2 1 3 4 5 2 第三小数为3. 输入描述: 输入有多组数据.每组输入n,然后输入n个整数(1<=n<=1000), ...