虽然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. udp 服务器界面监听

    今天在做项目的时候,发现不同子网下是不能做UDP通信的,不知道是不是这样呢 遇到一个错误:eclipse遇到报错: The type JPEGImageEncoder is not accessibl ...

  2. SpringMVC简版教程、部分功能

    注:本文只用注解来实现 前言 SpringMVC各种流程图流程图(其他的各种流程图) jsp.xml.action彼此之间的关系,都如何使用 spring-mvc.xml如何配置,放在哪里? acti ...

  3. Unity编程标准导引-3.3 Transform

    本文为博主原创文章,欢迎转载.请保留博主链接http://blog.csdn.net/andrewfan 每个游戏对象(GameObject),其存在于游戏世界,都有一个位置.朝向.大小等基本定位信息 ...

  4. 使用Python实现子区域数据分类统计

    目录 前言 geopandas简介 子区域数据分类统计 总结 一.前言        最近碰到一个需求,需要统计某省内的所有市的某数据分布情况信息.现有该省的数据分布情况以及该省的行政区划数据.我通过 ...

  5. gridView 编辑单元格获取单元格焦点位置（位于单元格的焦点位置）

    1.主要代码: private void Form1_Load(object sender, EventArgs e) { DataTable dt = new DataTable(); dt.Col ...

  6. 连连看的原生JS实现

    那天闲来无事,便想找个小游戏来打发时间,后来便找到了连连看, 玩了一会儿感觉无聊,想到各位高手用JS做的各种小游戏,便想自己也来做一个,于是便有了这几天的成果. 代码是用 原生JS 实现的,只是用来学 ...

  7. input输入自动大写

    方法1:使用JS <input name="text" type="text" onkeyup="this.value=this.value.t ...

  8. wpf的无边框窗体透明

    本人做了3年的winform,来了新的工作,需要使用wpf.对于wpf,本人小白一个.说的不对的地方,请大家多多指导.... 今天先从wpf的窗体属性开始说起! 需要做的项目功能大概和电脑桌面类似,需 ...

  9. 整型转字符串(convert int to char)优化实践

    0. 前言 其实基本都没什么机会做这么一个基础的优化,一般基础库里就有函数可以直接拿来用. 这里以snprintf为基准,给大家展示一下每一个优化带来的些许收益. 1. 优化过程 1.最初使用的是sn ...

  10. Ansible 系列之 Ad-Hoc介绍及使用

    Ad-Hoc 介绍 一.什么是ad-hoc 命令? ad-hoc 命令是一种可以快速输入的命令,而且不需要保存起来的命令.就相当于bash中的一句话shell.这也是一个好的地方,在学习ansible ...