网页CSS处理DIV圆角教程
css div 贝塞尔曲线
css div 贝塞尔曲线在CSS中，贝塞尔曲线是一种用于创建平滑曲线的数学工具。
它允许你创建复杂的曲线和形状，这些曲线和形状在动画、过渡和设计方面非常有用。
CSS中的div元素是一个通用的容器元素，可以用来布局和组织内容。
结合CSS的border-radius属性，你可以使用贝塞尔曲线来创建圆角效果，使div元素看起来更加美观和现代。
下面是一个使用贝塞尔曲线创建圆角的示例：css.div-element {width: 200px;height: 200px;background-color: #f5f5f5;border-radius: 100px 50px 30px 50px;/* 贝塞尔曲线值*/border-top-left-radius: 100px 50px 30px 50px;border-top-right-radius: 100px 50px 30px 50px;border-bottom-left-radius: 100px 50px 30px 50px;border-bottom-right-radius: 100px 50px 30px 50px;}在上面的示例中，border-radius属性用于设置四个角的圆角大小。
通过为每个角指定不同的值，你可以创建出各种形状的圆角效果。
通过调整这些值，你可以实现不同的贝塞尔曲线效果。
如果你想使用更复杂的贝塞尔曲线，你可以使用CSS的cubic-bezier()函数。
这个函数允许你指定四个控制点，通过这些控制点来定义曲线的形状。
下面是一个使用cubic-bezier()函数创建更复杂贝塞尔曲线的示例：css.div-element {width: 200px;height: 200px;background-color: #f5f5f5;border-radius: 100px 50px 30px 50px;/* 使用贝塞尔曲线值*/border-top-left-radius: cubic-bezier(0.25, 0.46, 0.45, 0.94) 100px 50px 30px 50px;border-top-right-radius: cubic-bezier(0.25, 0.46, 0.45, 0.94) 100px 50px 30px 50px;border-bottom-left-radius: cubic-bezier(0.25, 0.46, 0.45, 0.94) 100px 50px 30px 50px;border-bottom-right-radius: cubic-bezier(0.25, 0.46, 0.45, 0.94) 100px 50px 30px 50px;}在上面的示例中，cubic-bezier()函数用于定义曲线的形状，然后将其应用到四个角的圆角上。
DIV圆边
第一种平面<style type="text/css">div.RoundedCorner{background: #9BD1FA;width:66%;}b.rtop, b.rbottom{display:block;background: #FFF}b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}b.r1{margin: 0 5px}b.r2{margin: 0 3px}b.r3{margin: 0 2px}b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}</style><div class="RoundedCorner"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><br>div+CSS能实现圆边圆角效果,但是特复杂，不推荐使用.<br><br><b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>3D版<html><head><title>3D圆角</title><style type=text/css>.raised{background:transparent;width:100%;}.raised h1,.raised p{margin:0 10px;}.raised h1{font-size:2em;color:#fff;}.raised p{padding-bottom:0.5em;}.raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised.b4b{display:block;overflow:hidden;font-size:1px;}.raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b{height:1px;}.raised .b2{background:#ccc;border-left:1px solid #fff;border-right:1px solid #eee;}.raised .b3{background:#ccc;border-left:1px solid #fff;border-right:1px solid #ddd;}.raised .b4{background:#ccc;border-left:1px solid #fff;border-right:1px solid #aaa;}.raised .b4b{background:#ccc;border-left:1px solid #eee;border-right:1px solid #999;}.raised .b3b{background:#ccc;border-left:1px solid #ddd;border-right:1px solid #999;}.raised .b2b{background:#ccc;border-left:1px solid #aaa;border-right:1px solid #999;}.raised .b1{margin:0 5px;background:#fff;}.raised .b2, .raised .b2b{margin:0 3px;border-width:0 2px;} .raised .b3, .raised .b3b{margin:0 2px;}.raised .b4, .raised .b4b{height:2px; margin:0 1px;} .raised .b1b{margin:0 5px; background:#999;}.raised .boxcontent{display:block;background:#ccc;border-left:1px solid #fff;border-right:1px solid #999;}</style></head><body><div class="raised"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="boxcontent"><h1>3D圆角</h1></div><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></div></body></html>。
CSS圆角控制
DIV圆角设置CSS3的border-radius属性被Safari、Firefox和Chrome等浏览器原生支持，但是由于某些原因IE并不支持它。
为了想在IE中实现圆角，不得不使用一些技巧。
一个简单快速的方案是结合CSS3和javascript。
CurvyCorners是一个为HTML元素创建漂亮圆角的免费javascript库。
效果如下：该脚本的最大优势是可以在Safari、Chrome、Firefox中使用原生的CSS3属性，而在IE和Opera 中使用javascript。
我们所需要做的就是在页面中引入：curvycorners.js然后定义以下样式：.roundedCorners{width:220px;padding:10px;background-color:#DDEEF6;border:1pxsolid#DDEEF6;/* Do rounding (native in Safari, Firefox and Chrome) */-webkit-border-radius:6px;-moz-border-radius:6px;}然后在上面的样式后面定义一下代码：<script type="text/JavaScript">addEvent(window,'load',initCorners);function initCorners(){var setting ={tl:{ radius:6},tr:{ radius:6},bl:{ radius:6},br:{ radius:6},antiAlias:true}curvyCorners(setting,".roundedCorners");}</script>其中：tl、tr、bl、br分别是左上角（top-left）、右上角（top-right）、左下角（bottom-left）、右下角（bottom-right）。
Html轻松实现圆角矩形
这篇文章主要为大家详细介绍了html轻松实现圆角矩形的方法，告诉大家如何通过div+css以及定位来实现圆角矩形？感兴趣的小伙伴们可以参考一下问题：如何通过div+css以及定位来实现圆角矩形？解决方法概述：内容：首先在<body>标签内部里添加一个大层（大层用来固定整体大框架），然后大层内包含四个小层（四个小层里分别放四个圆角（事先用ps做好椭圆形形状，然后用切片工具切图））样式：在<head>标签内部设置的css要有的属性：1.position：relative；2.宽和高;3背景颜色;4.边框线（用来调整四个原角的相对位置，调整好后可以将边框线设置删除）在设置小层的css时，每个层里都要有的属性有：1.position：absolute；2.宽和高；3.方向属性（left，right，bottom,top）4.background：url（""）no-repeat;(引入各个方向的圆角图片)以下是我实现圆角矩形的代码：XML/HTML Code<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>圆角制作</title> <style type=text/css> #p { position:relative; width:400px; height:200px; background:black; margin:auto; } #plefttop { position:absolute; width:50px; height:50px; background:url("images/11.jpg") no-repeat; } #prighttop { position:absolute; width:50px; height:50px; right:-9px; top:0px; background:url("images/22.jpg") no-repeat; } #pleftbottom { position:absolute; width:50px; height:50px; left:0px; bottom:-14px; background:url("images/33.jpg") no-repeat; } #prightbottom { position:absolute; width:50px; height:50px; right:-9px; bottom:-14px; background:url("images/44.jpg") no-repeat; } </style> </head> <body> <div id=p> <div id=plefttop></div> <div id=prighttop></div> <div id=pleftbottom></div> <div id=prightbottom></div> </div> </body> </html> 注意：我的代码里用的css样式是内联式，CSS样式有三种：内联式，嵌入式，外部式。
Html轻松实现圆角矩形
这篇文章主要为大家详细介绍了html轻松实现圆角矩形的方法，告诉大家如何通过div+css以及定位来实现圆角矩形？感兴趣的小伙伴们可以参考一下问题：如何通过div+css以及定位来实现圆角矩形？解决方法概述：内容：首先在<body>标签内部里添加一个大层（大层用来固定整体大框架），然后大层内包含四个小层（四个小层里分别放四个圆角（事先用ps做好椭圆形形状，然后用切片工具切图））样式：在<head>标签内部设置的css要有的属性：1.position：relative；2.宽和高;3背景颜色;4.边框线（用来调整四个原角的相对位置，调整好后可以将边框线设置删除）在设置小层的css时，每个层里都要有的属性有：1.position：absolute；2.宽和高；3.方向属性（left，right，bottom,top）4.background：url（""）no-repeat;(引入各个方向的圆角图片)以下是我实现圆角矩形的代码：XML/HTML Code<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>圆角制作</title> <style type=text/css> #p { position:relative; width:400px; height:200px; background:black; margin:auto; } #plefttop { position:absolute; width:50px; height:50px; background:url("images/11.jpg") no-repeat; } #prighttop { position:absolute; width:50px; height:50px; right:-9px; top:0px; background:url("images/22.jpg") no-repeat; } #pleftbottom { position:absolute; width:50px; height:50px; left:0px; bottom:-14px; background:url("images/33.jpg") no-repeat; } #prightbottom { position:absolute; width:50px; height:50px; right:-9px; bottom:-14px; background:url("images/44.jpg") no-repeat; } </style> </head> <body> <div id=p> <div id=plefttop></div> <div id=prighttop></div> <div id=pleftbottom></div> <div id=prightbottom></div> </div> </body> </html> 注意：我的代码里用的css样式是内联式，CSS样式有三种：内联式，嵌入式，外部式。
css3圆角边框
css3圆⾓边框圆⾓边框⼀、border-radius属性简介为元素添加圆⾓边框，可以对元素的四个⾓进⾏圆⾓设置（属性不具有继承性）⼆、border-radius定义⽅法border-radius属性有两种定义⽅法：border-radius可以⼀次性对四个⾓设置相同的值(简写属性)，也可对4个⾓分别设置圆⾓样式(单独属设性置)。
（⼀）单独属性设置border-radius：同时设置四个边框的圆⾓样式；border-top-left-radius：设置左上⾓边框的圆⾓样式；border-top-right-radius：设置右上⾓边框的圆⾓样式；border-bottom-left-radius：设置左下⾓边框的圆⾓样式；border-bottom-right-radius：设置右下⾓边框的圆⾓样式；注意【边框的顺序不能打乱，⽐如border-top-left-radius就不可以写成border-left-top-radius 属性是固定的。
】通过实际操作可以看出⼆者表达效果是相同的。
（⼆）简写属性为border-radius设置四个参数,要注意顺序关系1、为属性只设置⼀个值，四个边框的圆⾓都采⽤相同的值border-radius：20px //四个边框圆⾓为20px2、为属性设置两个值，第⼀个值设置左上⾓和右下⾓，第⼆个值设置右上⾓和左下⾓border-radius: 20px 50px //左上⾓和右下⾓20px，右上⾓和左下⾓50px3、为属性设置三个值，第⼀个值设置给左上⾓，第⼆个值设置给右上⾓和左下⾓，第三个值设置给右下⾓border-radius: 20px 50px 5px //左上⾓20px，右上⾓和左下⾓50px，右下⾓5px4、为属性设置四个值，第⼀个值设置给左上⾓，第⼆个值设置给右上⾓，第三个值右下⾓，第四个值左下⾓（按照顺时针⽅向）border-radius: 20px 50px 5px 100px //左上⾓20px，右下⾓50px，右下⾓5px ，左下⾓100px三、分别设置⽔平半径和垂直半径border-radius的语法border-radius: {1-4} length /% / {1-4} length /%;border-radius: 20px 10px 40px / 25px 30pxlength 定义圆⾓的形状；% 以百分⽐定义圆⾓的形状；{1-4} border-radius的参数个数范围为1~4个注释【按此顺序设置每个 radii(半径)的四个值。
css3写内部圆角样式
css3写内部圆角样式CSS3中可以使用border-radius属性来实现内部圆角样式。
border-radius属性用于设置元素的边框圆角，可以设置一个或多个值来指定不同的圆角半径。
语法：border-radius: value;value可以是一个或多个长度值，用空格分隔。
每个值可以是一个长度值（如px、em、rem等），也可以是一个百分比值。
示例：div {border-radius: 10px;}上述示例代码将div元素的四个角都设置为10px的圆角。
如果想要设置不同的圆角半径，可以使用四个值来分别指定左上角、右上角、右下角和左下角的圆角半径。
示例：div {border-radius: 10px 20px 30px 40px;}上述示例代码将div元素的左上角设置为10px的圆角，右上角设置为20px的圆角，右下角设置为30px的圆角，左下角设置为40px的圆角。
如果只指定两个值，第一个值将应用于左上角和右下角，第二个值将应用于右上角和左下角。
示例：div {border-radius: 10px 20px;}上述示例代码将div元素的左上角和右下角设置为10px的圆角，右上角和左下角设置为20px的圆角。
如果只指定一个值，该值将应用于所有四个角。
示例：div {border-radius: 10px;}上述示例代码将div元素的四个角都设置为10px的圆角。
除了使用固定的长度值来设置圆角半径，还可以使用百分比值来相对于元素的尺寸来设置圆角半径。
示例：div {border-radius: 50%;}上述示例代码将div元素的四个角都设置为50%的圆角，即将元素变为一个圆形。
在CSS3中，还可以使用border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius属性来分别设置元素的左上角、右上角、右下角和左下角的圆角半径。
前端 圆角向内写法
前端圆角向内写法全文共四篇示例，供读者参考第一篇示例：前端开发中，圆角是常见的效果之一，它可以使页面元素显得更加美观和现代化。
而圆角向内效果是一种特殊的圆角效果，它与常见的圆角效果相反，可以让元素呈现出一种凹陷的样式，使整个页面看起来更加立体和有层次感。
一般来说，我们可以通过CSS的border-radius属性来实现圆角效果，而圆角向内效果则需要一些特殊的技巧来实现。
在本文中，我们将介绍一些常见的实现圆角向内效果的方法，希望能对前端开发者们有所帮助。
方法一：使用伪元素伪元素是CSS中的一个重要概念，它可以用来在页面上创建一些不存在的元素，并对其进行样式设定。
我们可以利用伪元素来实现圆角向内效果，具体步骤如下：给元素添加一个相对定位的父元素，并设置其overflow属性为hidden。
然后，通过伪元素::before和::after来创建两个半透明的圆角矩形，将其定位到元素的四个角上。
将元素的背景色设置为透明，并将伪元素的背景色设置为需要的颜色，这样就可以实现圆角向内的效果。
以下是一个简单的示例代码：```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Inner rounded corner effect</title><style>.inner-rounded {position: relative;overflow: hidden;background-color: transparent;width: 200px;height: 100px;}.inner-rounded::before,.inner-rounded::after {content: '';position: absolute;background-color: #ff6347;border-radius: 50%;}.inner-rounded::before {top: 0;left: 0;width: 50px;height: 50px;}.inner-rounded::after {top: 0;right: 0;width: 50px;height: 50px;}</style></head><body><div class="inner-rounded"></div></body></html>```方法二：使用box-shadow另一种实现圆角向内效果的方法是使用box-shadow属性。
CSS样式-border-radius圆形边框基本用法
CSS样式-border-radius圆形边框基本⽤法主要通过属性border-radius，您能够创建圆⾓边框，正圆边框和椭圆边框，使⽤图⽚来绘制边框。
圆⾓边框（border-radius）的基本⽤法：圆⾓边框的最基本⽤法就是设置四个相同弧度的圆⾓，其样式如下：css部分：div{width: 300px;height: 300px;border: 1px solid red;border-radius: 20px;}html部分：<div>四个圆⾓相等的圆⾓矩形</div>其效果如下：如果将值设为50%，则实现正圆形，其效果如下：css部分：div{width: 300px;height: 300px;border: 1px solid red;border-radius:50%;}html部分：<div>正圆形</div>（注：正圆只能实现在四边相等的条件下如不等则实现为椭圆形）如果输⼊两个值实现值的位置顺序为：值1（左上右下）值2（左下右上）css部分：div{width: 300px;height: 300px;border: 1px solid red;border-radius: 20px 100px;}html部分：<div>输⼊两个值实现值的位置顺序</div>其效果如下：如果输⼊三个值实现值的位置顺序为：值1（左上）值2（左下右上）值3（右下）css部分：div{width: 300px;height: 300px;border: 1px solid red;border-radius: 20px 100px 50px;}html部分：<div>输⼊四个值实现值的位置顺序</div>其效果如下：如果输⼊四个值实现值的位置顺序为：值1（左上）值2（右上）值3（右下）值4 （左下）css部分：div{width: 300px;height: 300px;border: 1px solid red;border-radius: 20px 100px 50px 50px;}html部分：<div>输⼊四个值实现值的位置顺序</div>其效果如下：。
用CSS 3新特性实现圆角效果
这种方法不用创建有颜色的图片作为圆角的背景，而
是 创 建 曲线 型 的 图 片 来 盖 住 内 容 框 的 背 景 颜 色 。 这张
图片有一半是透 明的 ，因此露 出背景颜色的地方就有
奄 盛扩 ｆ 《时 ｔ ｐ ｒｇ ｔ．ｉ ｏ ｉｈ ｇ ｆ 摧 越 荔ｔ ｌ ＋ ． ｉ ｏ ｅｔｇｆ
２ ０ １Ｏ Ｏ１ １ ２ ９
￣Ｔ ｃ ｎ ｌｇ 技 ｅ ｈ ｏｏ ｙ ｌ 术
ｑ ｔ ），
』 ｛ ０ｔｔ０ —ｒ ｇｎｔ ・ ｃ ｇ ＝ 』 Ｄａｃ ｋｇｒ０ｕ ａ —
有 应 用 ， 可 以 实 现 比 圆 角 复 杂 得 多 的 效果。
ｂ ｄ －ｍａ ｏｒ ｅｒｉ ｇｅ
致。
最后实现 的效果大致如图２ 所示。
掌 ＇Ｓｉ ｅ Ｒｏｕｎ Ｃｏｍｅｒ ｍｐｌ ｄ
Ｓ ｎ ｌ ｏｏ ｅ ａ ｋ ｒ ｕ ｄｗｉ ｉ ｅ ｉｇｅｃ ｌｒ ｄｂ ｃ ｇ ｏ ｎ ｌ ｘ ｄｗｉｔ ． ｅｔ ｈｆ ｄｈ Ｕｓ ｗｏ ｂ ｃ ｇｏ ｎ ｍａ ｅ ． ａ ｋ ｒ ｕ ｄｉ ｇ ｓ
内 容框 的颜 色 ， 只 需 要 在ＣＳ 代 码 中修 改．ｏ 的背 景 Ｓ ｂｘ
颜 色 值 ，不 必 创 建任 何 新 的 图 片 。需 要 注 意 的是 覆 盖
我 们 要 将 之 前 应 用 于 顶部 和底 部 的 图 片分 别分 割 成 两张 ，所 以这 项 技 术 需 要 四张 图 片 ，并 且 要 增 加 一 些 无意 义 的Ｈ ｐｐｅｒ一１ｎ
ｉ — ｅ １ ｒ ｐｅ ｔ ｌ ｆ ｔ ｐ ） ｏ ａ ｅ ｔ ｏ
．
多个背景 图像
仍 以前 面 的 Ｈ ＭＬ 码 为例 ： Ｔ 代
＜ｄｉｖ ｃｉａｓｓ一 ” ｂ ０× ” ＞
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS Sprites + 圆角 2009-05-08 09:34 by 副主编 zly06 评论(10) 有12336人浏览
< > 猎头职位: 安徽: 合肥,杭州：高薪诚聘前端开发工程师
初步介绍 当然，我知道现在有成千上万个关于 用CSS处理圆角 的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。
看一下演示 | 下载 css sprites + 圆角 您还可以参考一下文章： 43个PSD转XHTML, CSS教程
我们将怎样来处理? 我处理圆角的版本是由内置的绝对定位的四个div组成，每个div都有唯一的圆角图片作CSS Sprite操作。我们将会这样做:
是什么方式导致这项技术表现得这么了不起呢（What makes this technique cool）?
通过可变的宽度和高度处理毗邻的元素的能力。没有极限。（The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.） 这项技术，正如我之前提到的，是与 CSS Sprites 结合操作完成的。如果您不知道这是项怎样的技术或者说不知道怎么使用它，那么请先阅读我 之前的文章。CSS sprites 都学会了吗? 那我们就开始吧!
第一步: 创建我们的 Sprite 1. 为矩形圆角图片处理选择一款编辑器 (在这个案例中我选择的是Firework). 2. 切割并且导出圆角到本地临时位置 (我们将会在之后用到). 3. 新创建一个文件，将圆角导入到这个新文件中，复制三次，然后旋转这三个新切片得到另外的三个圆角。 4. 合成四个圆角为一张图片, 并用 1px 的红线 来区分它们. 5. 导出合成图片，sprite 也就大功告成了。
第二步: HTML 代码 首先，我们会给容器 div 一个 .roundedBox 类 :
一切搞定? 嗯，让我们把注意力再转移到 CSS 代码上来。
第三步: CSS 代码 如你所知, (或者您会在这里快速学习到) 绝对定位元素通常都依照相对定位的父元素进行定位。. If this element is not defined, they will take as their parent relatively-positioned element, the body tag.如果这个父元素无法界定，那么它会去最近作相对定位的那个父元素，直至 body 标签。 哈?! - 好了，如果到此为止您仍没有掌握，不用担心，我们将在第二部分了解它。（翻译得有点拗，附上原文：Ok, if you didn’t get this, don’t worry, you’ll catch it in an second.）
让我们先来定义下所有的圆角 所有的圆角都必须定义绝对定位，并且注明高度跟宽度。 我的圆角定义的宽度
跟高度都是 17px. .corner { position:absolute; width:17px; height:17px; }
如果您是第一次切割矩形圆角，那么宽度跟高度很可能会不一样 (咄!)。 现在开始定义 div 容器样式: .roundedBox {position:relative;} 任何定义有类 .roundedBox 的元素内，绝对定位元素都会相对于这个元素进行定位，而不是标签 body。 我们也必须设置一些padding值，如果没有设置，圆角将会覆盖我们的文本，这肯定不是我们想要的效果。 重要提示: top 和 bottom padding 值必须 等价于圆角的 height。left 和 right padding 值必须等价于圆角的宽度。 正如您已经知道的，我的圆角宽度跟高度是相等的，因此，四个边角的padding 值也是相等的:
.roundedBox {position:relative; padding:17px; margin:10px 0;} 我也通过 margin 给我们的 div 流出了一定的空隙 最后，让我们对没有圆角作单独定义 我们会对每个圆角作绝对定位设置，并且定位背景图的位置 (根据我们的 sprite):
.roundedBox {position:relative; padding:17px; margin:10px 0;} .corner {position:absolute; width:17px; height:17px;} .topLeft {top:0; left:0; background-position:-1px -1px;} .topRight {top:0; right:0; background-position:-19px -1px;} .bottomLeft {bottom:0; left:0; background-position:-1px -19px;} .bottomRight {bottom:0; right:0; background-position:-19px -19px;}
您可能已经注意到，我们的样式仍然还没有下载 sprite。我们一般不会去定义它们的原因是，我们会使用另外的方法。
圆形盒模型 1 (蓝色) HTML 代码
我们必须给容器 div 定义一个ID为 #type1，用来实施特殊背景。 CSS 代码
首先，我们得给 #type1 匹配一个背景色，使之融合于 sprite 中的圆角: #type1 {background-color:#CCDEDE;}
之后，通过定义 .corner 类来协助圆形盒模型载入 Sprite 样式: #type1 {background-color:#CCDEDE;} #type1 .corner {background-image:url(../images/corners-type1.gif);}
好了，我们的第一个圆角矩形大功告成了！预览圆角矩形模型1 (蓝色) . 圆形盒模型 2 (绿色) / 圆形盒模型 3 (紫色) 模型1，模型2跟模型3的唯一差别就是它们的颜色，所以我们也仅仅只修改这些。
模型 2 (绿色) HTML 代码
CSS 代码 (仅仅修改 sprites 的颜色及背景色)
#type2 {background-color:#CDDFCA;} #type2 .corner {background-image:url(../images/corners-type2.gif);}
预览圆角矩形模型2 (绿色) . 模型 3 (紫色) HTML 代码