当前位置：文档之家› 兼容各个浏览器的纯CSS圆角代码

兼容各个浏览器的纯CSS圆角代码

兼容各个浏览器的纯CSS圆角代码
兼容各个浏览器的纯CSS圆角代码

兼容各个浏览器的纯CSS圆角代码

无标题文档

简洁设计网是个好

网站简洁设计网是个好网

站简洁设计

网是个好网站简洁设计网是个

好网站简洁设计网

是个好网站简洁设计网是个好网站简洁https://www.doczj.com/doc/2115736636.html,/?keyword=设计" target="_blank">https://www.doczj.com/doc/2115736636.html,/s?tn=designba&bs=%D4%AA%B5%A9&f=8&wd=设计+site%https://www.doczj.com/doc/2115736636.html," target="_blank">设计网是个好https://www.doczj.com/doc/2115736636.html,/?keyword=网站" target="_blank">https://www.doczj.com/doc/2115736636.html,/s?tn=designba&bs=%D4%AA%B5%A9&f=8&wd=网站+site%https://www.doczj.com/doc/2115736636.html," target="_blank">网站

无图片圆角效果

css圆角效果，IE6, firefox均显示正常

＜html＞

＜head＞

＜title＞css圆角效果--七度空间网页教学网＜/title＞

＜meta http-equiv="content-type" content="text/html; charset=gb2312"＞

＜style type="text/css"＞

div.RoundedCorner{background: #9BD1FA}

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＞

＜/head＞

＜body＞

＜div class="RoundedCorner"＞

＜b class="rtop"＞＜b class="r1"＞＜/b＞＜b class="r2"＞＜/b＞＜b class="r3"＞＜/b＞＜b class="r4"＞＜/b＞＜/b＞

＜br＞无图片实现圆角框＜br＞＜br＞

＜b class="rbottom"＞＜b class="r4"＞＜/b＞＜b class="r3"＞＜/b＞＜b class="r2"＞＜/b＞＜b class="r1"＞＜/b＞＜/b＞

＜/div＞

＜/body＞

＜/html＞

CSS圆角（代码比较精练）

2007-05-28 21:16

简写CSS圆角

简写CSS圆角

2种css圆角代码

html xmlns:v>

css实现真正的圆角表格

css圆角效果


无图片实现圆角框

本文探讨的是前端设计种最常用的页面圆角框效果的７种不同方法实现解决方案，其核心关键词是“圆滑、完美、兼容、重用性、语义”，这些技术都是收集目前网络上最流行的做法。纵观种种方法，各有其优势，请针对不同的环境分别使用。

圆角框，因为其样式比直角框漂亮，所以成为设计师心中偏爱的设计元素。现在的web标准下大量的网页、博客都采用圆角框设计，成为一道亮丽的风景线。

然而，就是这个圆角，却成为了网页前端人员心中永远抹之不去的阴影，对它，可以说是又痛又爱。爱的是它的漂亮，痛的是要让它兼容通行于各种不同的浏览器却成为一个永远的神话。

让我们来回顾一下目前网络流行的都有哪些解决方案。

１，无图片纯css圆角框

收录理由：兼容性强，不用图形

图一

特点：

1.不用任何图形，使用很多个div容器模拟出圆角效果。

2.兼容性：通杀所有浏览器

缺点：

1.构造这个圆角需要加入太多的无语义的标签，结构比较冗余。

2.重用性不强：如果一个页面有多个圆角，并且要实现不同的半径大小，则其灵活性不够。

3.边框颜色虽然可以调节，但会对页面中的结构产生致命的影响，适用于色彩单一并且一个页面中圆角应用不多的页面。

4.不容易实现圆弧内有渐变色的图形背景。

5.圆角框不够圆滑，有锯齿现象，适合于背景色和当前色色差不大并且圆弧较小的网页。

实现原理：

用很多1像素高的div容器，利用背景色和边框色来模拟出圆角框的轮廓线。

实例演示：https://www.doczj.com/doc/2115736636.html,/boxes/snazzy.html

２，无图片纯css圆角框，用特殊字符（&bull）

收录理由：圆滑，不用图形

图二

特点：

1.不用任何图形，使用特殊字符•（圆点）模拟出圆角。

2.兼容性：通杀所有浏览器

3.圆角平滑

缺点：

1.构造这个圆角一样需要加入无语义的标签，结构冗余，同第一种一样。

2.重用性不强：如果一个页面有多个圆角，并且要实现不同的半径大小，需要调整四个角图片的定位，并且字符大小对其有影响，灵活性不够。

3.颜色虽可调节，但要求里面的背景色和字符的颜色相同，不能做成边框线条。适用于色彩单一并且一个页面中圆角不是太多的页面。

4.一样不容易实现圆弧内有渐变色的图形背景。

实现原理：

用特殊字符（&bull），利用定位，截取四分之一圆模拟出圆角框的一个角图片。

实例演示：https://www.doczj.com/doc/2115736636.html,/boxes/curves.html

３，图片圆角框

收录理由：兼容性强，可以表现很复杂的圆角效果。

图三

特点：

1.使用四个圆角图形（或一个圆图片）。

2.兼容性：通杀所有浏览器。

3.这是最常用的圆角框做法。

4.因为采用图片来表现，所以其圆角是超级平滑，无任何锯齿现象。

5.表现丰富，适用于各种对图片表现要求较高的圆角框。

缺点：

1.构造这个圆角也需要加入四个标签来装四张角图片，结构也有冗余。

2.重用性不强：如果一个页面有多个圆角，并且要实现不同的半径大小，则要重新制作一套圆角图片。

3.如果对结构的冗余没有特别的需求，这就是超级圆滑圆角框的解决方案了。

实现原理：

利用九宫格原理，在一个容器的四个角加入绝对定位（或相对定位）的四张圆角图片。

实例演示：https://www.doczj.com/doc/2115736636.html,/boxes/three_cornered.html

４，利用VML绘制圆角（ie only）

收录理由：无图片，平滑，可加阴影边框

图四

特点：

1.不用任何图形。

2.兼容性：只能在IE中使用

3.圆角半径随意调整

4.重用性强：多个圆角任意调用。

5.圆角颜色随意设置。

6.结构无冗余。

7.圆角平滑无锯齿。

缺点：

1.除了兼容性有问题外，其它方面的表现都不错。

2.不能在圆弧中表现丰富的有渐变的图片，因为圆弧外框是透明的。

实现原理：使用IE专用的VML来画出圆角。

id=”roundbox”

class=”circle”

strokecolor=”red”

strokeweight=”2px”

arcsize=”0.08″>

注意加入引用空间：

这是兼容的用法，xmlns:v一定不能少，否则。。。

样式表中加入这一句话：

v”:*{behavior:url(#default#VML);display:inline-block;}

Arcsize为半径

Strokeweight为边框线宽度

Strokecolor为边框线的颜色

实例演示：（请在IE系列浏览器下查看本实例）

VML画平滑圆角

使用IE专用的VML来画平滑圆角框，还可以画出阴影效果。就其图形表现来说，是非常完美的。

５，利用私有属性绘制圆角（FF3 only）

收录理由：平滑无锯齿

图五

特点：

1.不用任何图形。

2.兼容性：只能在FF3中使用，其它浏览器不受支持。

3.圆角半径随意调整

4.重用性强：多个圆角任意调用，只需要样式表设置就可以。

5.圆角颜色随意设置。

6.结构无冗余。

7.圆角平滑无锯齿。

缺点：

1.除了兼容性有问题外，其它方面的表现都不错，这种方式应该是最完美的方式，可惜目前只有FF3能支持这个属性，以后CSS3后会支持这个属性，不过这不知道要等到多少年以后。

2.同第五种圆角一样，在处理圆弧内的图片背景时显得有些有心无力。

实现原理：

使用FF3专用的私有属性来画出圆角。

只用两种属性就能体现圆滑的圆角框

-moz-border-radius:10px;/*圆角半径*/

Border:5px red solid;/*边框大小*/

实例演示：（请在FF3浏览器下观看，其它浏览器不支持）

FF3私有属性画的圆角框

FF3下的圆角框两个属性就可以解决:

-moz-border-radius：半径

border：边框

６，无图片脚本圆角框（js半完美解决方案）

这种方案目前应该是比较完美的方案了。

图六

特点：

1.不用任何图形。

2.兼容性：通杀所有浏览器

3.圆角半径随意调整

4.重用性强：多个圆角任意调用。

5.颜色随意设置，并且可以使用复杂的图片做为背景，表现丰富。

6.结构无冗余，只需要在容器上定义一个class或ID就可以将这个div变成圆角。

7.圆角平滑。

缺点：

1.客户端禁用JS时就无圆角，不过在目前情势下，这种情况应该不会成为太大的问题。

实例演示：https://www.doczj.com/doc/2115736636.html,/examples.php（有三个演示例子）

７，无图片vml/canvas结合的圆角框

增补一种方案，结合jquery/vml/canvas的无图片圆角框。

图七

特点：

1.不用任何图形。

2.兼容性：通杀所有浏览器

3.圆角半径随意调整,并且四个角可以随意设置要不要圆角。

4.重用性强：多个圆角任意调用。

5.颜色随意设置，并且可以使用复杂的图片做为背景，表现丰富。

6.结构无冗余，只需要在容器上定义一个class或ID就可以了。

7.圆角平滑。

缺点：

1.本圆角需要用到jquery库，和一个JS文件，如果在您的项目中已经用到了Jquery这个库，倒还可以用得上，不然，为一个圆角加载一两个JS文件有点得不偿失。

2.圆角在不同的浏览器下显示有点小小的问题.

实例演示：https://www.doczj.com/doc/2115736636.html,/cornerz/

打包下载：下载demo

结语：目前的css因为不能为一个容器中定义多张背景图片，造成了为了这种圆角效果而加入冗余标签。听说CSS3会引入这一属性，可能到哪时，就是圆角框统一的时候了。另外也听说在CSS3中有意向加入像FF3私有属性（-moz-border-radius）的方法，这也可以完美地解决这个问题。但在目前的情势下，可能也只有用上面的这些方法来过渡了，强烈期待CSS3的到来。

总而言之：要实现绝对的完美圆角框在目前的形势下基本上是不可能的，所以取名为“半完美解决方案”。

CSS实例：无懈可击的CSS圆角技术

要一个宽度不固定的框，事情变得有些复杂了。宽度不固定，就意味着这个框在水平和垂直方向都有足够灵活的变化。

为什么说这更难一些呢？因为它需要对四张图片的合适安置——每个圆角用一张。每个圆角都要独立出来，以便框能够在各个方向伸展。于是，四张图片就意味着需要四个HTML 对象来作为背景图片的载体。

有一些实现办法包括在样式表中使用“生成内容”，即使用：before和:after伪类来为单独的一个对象加上多张背景图。这种方法的问题在于，在编写本书的时候，Internet Explore(IE)还不支持“生成内容”，因些相当大数量的用户就将无法看到圆角效果。

那怎么办呢？如果一个固定的宽度已经预先确定，那就能很容易地使用本章上一节中给出的那种方法，只背景图片：一张用于显示顶部的左右圆角，另一张显示底部的左右圆角。准备好两个HTML对象来做图片载体并不是难题。可是当要求实现宽度不固定的框时，为了让IE用户也能看到一样的设计效果，那就是加上额外的HTML代码了。

圆角化(填充em方法，简单，很棒，适合单色，通用性不强)

以下是Web标准的能人，也是本书的技术编辑Ethan Marcotte在解决Browse Happy网站所面临这样的问题时的做法（图5-15）https://www.doczj.com/doc/2115736636.html,

图5-15 Browse Happy是一个旨在帮助人们学习使用能取代Internet Explorer 在Web标准兼容的浏览器的网站

Ethan 用了一个圆角框来显示用户“已经切换使用”的某个兼容Web标准的浏览器，

包括软件名称和图标（图5-16）。

图5-16 这个圆角矩形框可以往任何方向扩展

Ethan 没有给框设定固定的宽度，而使用了一种对前面提到过的“滑动门”技术的变通方法，使得当内容文字增多（或增大）时，框在水平和竖直方向都能伸缩（图5-17）。

图5-17 当文字变大时，框会在水平和竖直方向扩展，同时能保持圆角形状不变

我们现在来基于Ethan所使用的技术，构建另一个示例，它将是一个具有真正灵活性的框，能容纳其内部的任何东西。

1.HTML代码结构

如我先前提到过的，要实现一个在每个方向都灵活的框，面临的不幸事实是我们需要添加额外的代码。这些额外的代码是独立引用框的四角的图片所必须的，这样它才能根据需要在四个方向扩展。

注意：因为有些地方已经超过了本章要讨论的范围，所以为了让例子简单，这里对HTML 代码做了一些修改。本来，这个圆角矩形框是一个“定义列表”对象的一部分，该列表还包括有“切换人”的姓名以及其它信息。这是一个运用定义列表的聪明又巧妙的方法－－可以去查看https://www.doczj.com/doc/2115736636.html, 的页面源码获知更多细节。

要谨记，我们应该使用最少的HTML对象来作为背景图片的载体，以下是我们创建的HTML代码：

Example Source Code [https://www.doczj.com/doc/2115736636.html,]

This box is:

Indestructible!

一个作为容器的

和紧随其后的一个段落对象将作为前两个载体。要凑足四个，我们将链接“Indestructible!" 用第二个段落对象以及（这里引入了一个有争议的额外HTML 对象）一个对象包围起来。这里我使用是因为，从技术角度来讲，我也打算让它个链接表达一种强调的意思。

同时，我悄悄地加上这个对象。这是我打算避免的事情，但是本例的情况下，我们需要这个第四个对象，以便引入创建圆角的必要背景图片（图5-18）。

图5-18 我们建的框的HTML代码给我们提供了四个可用作背景图片载体的对象

结构图：

2.图片的策略

虽然我们需要引用四次背景图片（一个角一次），但可以借鉴Browse Happy网站所用的巧妙方案，它只需要用到两张GIF图片。我们先来看看图片本身，就能理解这种方法了。

如图5-19所示，rounded-left.gif 是一张9个像素宽的GIF图片，包括左上方和左下方圆角。我们将它创建得比预期的高很多，以便能容纳大的内容量。

图5-19 这张名为rounded-left.gif 的图片包括了左上和左下圆角

再如图5-20 ，rounded-right.gif 是一张类似的图片：它负责显示右边的上下两个图角，以及上，右和下边线。这张图片和rounded-left.gif 的高度相同，并且也比原本所需的尺寸要宽很多。

图5-20 rounded-right.gif 包括右上和右下圆角。这张图还带有框的上下边线

现在我们来定位这此图片——并且这里就是精妙之处。图片rounded-left.gif 将对齐于top以形成左上方的角（图5-21），然后再次被使用，对齐于bottom，形成左下方的角。

图5-21 当依附到顶边时，除非框增到足够大而被暴露，否则图片下面的圆角是显示不出来的

只要框不会超过图片高，那么那个没有用上的，隐藏起来的圆角就不会显示（（这也解释了为什么我们开始时将图片做得足够高）。相应的，对于rounded-right.gif，也会被使用两次——作为右上和右下圆角。

运用最好的判断力来决定将这些图片做得多高和多宽，当然主要是取决于框内部会放些什么类型的内容。留出一些多作空间，以便应付意料之外的文字大小和内容量。

现在我们继续操作，给HTML代码应用样式，并且将所有的设计整合在一起。

3.应用样式

因为不想给框赋予一个固定的宽度，并且还希望那些圆角总是紧挨着框中的内容，所以浮动这个容器。将容器浮动能防止框自动变得和窗体（或者其他外围容器对象）一样宽。取而代之，框里面的内容的宽度将决定框伸展多宽。

Example Source Code [https://www.doczj.com/doc/2115736636.html,]

.container {

float: left;

color: #666;

}

除了将框左浮动，我们还设定了框中文本的基本颜色：深灰色。

接下来，按照我们的策略将这两张背景图片放到HTML代码中那四个可用的对象上。首先将右上角作为外围主窗口的背景，将rounded-right.gif依附于其右上位置，使用图片的上半部分。

Example Source Code [https://www.doczj.com/doc/2115736636.html,]

.container {

float: left;

color: #666;

background: url(img/rounded-right.gif) top right no-repeat;

}

注意我们是通过将图片定位到对象的右上方来设置背景。

结果如图5-22，rounded-right.gif 的上面部分显示出来成为了整个容器的背景。

图5-22 将图片对齐到右上角显示出了圆角效果

按照代码顺序，容器之后的对象就是第一个段落，我们使用了一个class="desc"（desc 表示description）来标记它。然后我们将rounded-left.gif对齐到top和left，它的上半部分作左上圆角。这里我们还将

对象的默认margin和padding都高为0。稍后我们再根据需要加上全适的padding值。

Example Source Code [https://www.doczj.com/doc/2115736636.html,]

.container {

float: left;

color: #666;

background: url(img/rounded-right.gif) top right no-repeat;

}

.desc {

margin: 0;

padding: 0;

background: url(img/rounded-left.gif) top left no-repeat;

}

加上第二张背景图片后的结果见图5-23，左上圆角加好了。

图5-23 将图片对齐于左上角后，部分圆角效果出来了。

接下来，添加左下圆角，通过给第二个段落（我们给它标记了class="link"）指定rounded-left.gif的下面部分作为背景。这张图的上面部分，我们之前通过将图片对齐于top 和left来显示，现在则将它对齐于bottom和left，以显示出下面的圆角。使用的间隔。第二个段落的三个侧边加了9px的padding,以此给内容和框的边界之间添加合适的间隔。第二个段落的左侧也加了9px的padding.这个值和图本身的宽度相同，以便让"Indestructible!"链接文字后面的圆角能显露出来。

Example Source Code [https://www.doczj.com/doc/2115736636.html,]

.container {

float: left;

color: #666;

background: url(img/rounded-right.gif) top right no-repeat;

}

.desc {

margin: 0;

padding: 9px 9px 0 9px;

background: url(img/rounded-left.gif) top left no-repeat;

}

.link {

margin: 0;

padding: 0 0 0 9px;

background: url(img/rounded-left.gif) bottom left no-repeat;

}

到目前为止的结果见图5-24，四个圆角中有三个已经被加在了正确位置，还剩最后一个了。

图5-24 通过重用rounded-left.gif 但是对齐到下方，我们加上了第三个圆角

最后一张背景图将附着在嵌套在第二个段落对象里面的对象上。我们将rounded-right.gif对齐于bottom和right,显示图片的下面部分，另外好包括一定padding值，以便将框中的文字和边线有均匀的间隔。大多数浏览器会将包围起来的文字显示为斜体，所以我们还要覆盖这个属性，显示正常的字体。

Example Source Code [https://www.doczj.com/doc/2115736636.html,]

.container {

float: left;

color: #666;

background: url(img/rounded-right.gif) top right no-repeat;

}

.desc {

margin: 0;

padding: 9px 9px 0 9px;

background: url(img/rounded-left.gif) top left no-repeat;

}

.link {

margin: 0;

padding: 0 0 0 9px;

background: url(img/rounded-left.gif) bottom left no-repeat;

}

.link em {

display: block;

padding: 0 9px 9px 0;

font-style: normal;

background: url(img/rounded-right.gif) bottom right no-repeat;

}

.container a {

font-size: 130%;

color: #e70;

}

通常情况，是一个内联对象，不会自动扩展直至和父容器宽度相同，所以不能用于背景图片的载体。但能过添加规则display: block;，将变成一个块级对象，强制让它内部的任何内容都延伸到框的边界，就能解决这个问题了。此外我们将框中的链接文字设置为橙色，并且比正常情况大——因为，不可破坏的链接就该是这样子。

图5-25是最后完成的框的效果，通过对齐两张背景图片，创建好了四个圆角。

图5-25 这就是我们的成品，“牢不可破”的矩形框

4.牢不可破的特性

正如Browse Happy例子那样的情况，请注意我们的圆角矩形框，根据其内部的文字大小和内容量的变化，能够在所有方向自由扩展和收缩。真正的牢不可破（图5-26）

图5-26 不管有多大的文字还是多少内容，框都可以扩大再扩大

CSS之圆角图片

HTML:

CSS:

#MyImg{float:left; width:77px; height:77px; margin:0 9px; text-align:center;}

#MyImg div{font-size:0; overflow:hidden; border-color:#C00; border-style:solid; background-repeat:no-repeat;}

#MyImg .step1{width:69px; height:0; margin:0 4px; border-width:1px 0 0;}

#MyImg .step2{width:69px; height:1px; margin:0 2px; border-width:0 2px;}

#MyImg .step3{width:73px; height:2px; margin:0 1px; border-width:0 1px;}

#MyImg #line2{background-position:-3px 0;}

#MyImg #line3{background-position:-1px -1px;}

#MyImg #line4{width:75px; height:69px; border-width:0 1px; background-position:0 -3px;}

#MyImg #line5{background-position:-1px -72px;}

#MyImg #line6{background-position:-3px -74px;}

效果如下（左侧为原图，右侧为效果图）：

圆角图片css样式

2010-04-07 14:09

.menuHd{

position:relative;

padding:0 17px;

}

#contextmenu .menuHd div.leftTop{

background:url(images/rck_leftTop.png) no-repeat left top; position:absolute;

left:0px;

top:0px;

width:17px;

height:16px;

}

#contextmenu .menuHd div.rightTop{

background:url(images/rck_rightTop.png) no-repeat left top; position:absolute;

right:0px;

top:0px;

width:17px;

height:16px;

}

#contextmenu .menuHd div.middle{

background:url(images/rck_tside.png) repeat-x left top; width:100%;

height:16px;

}

.menuFt{

position:relative;

padding:0 17px;

}

#contextmenu .menuFt div.leftBottom{

background:url(images/rck_leftBottom.png) no-repeat 1px 0; position:absolute;

left:0px;

bottom:0px;

width:17px;

height:16px;

}

#contextmenu .menuFt div.rightBottom{

background:url(images/rck_rightBottom.png) no-repeat left 0; position:absolute;

right:0px;

bottom:0px;

width:17px;

height:16px;

}

#contextmenu .menuFt div.middle{

background:url(images/rck_bside.png) repeat-x left top;

width:100%;

height:16px;

}

.menuBd{

position:relative;

padding:0 9px;

}

#contextmenu .menuBd div.leftBd{

background:url(images/rck_lside_thin.png) repeat-y left bottom; position:absolute;

left:0px;

top:0px;

width:9px;

height:100%;

}

#contextmenu .menuBd div.rightBd{

background:url(images/rck_rside_thin.png) repeat-y left bottom; position:absolute;

right:0px;

top:0px;

width:9px;

height:100%;

}

.menuContent{

padding:0px 5px;

background:#fff;

}

内容写在这儿

无图片css圆角的实例：3D效果css圆角

CSS代码：

Example Source Code [https://www.doczj.com/doc/2115736636.html,]

.raised{background:transparent;width:40%;}

.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{displ ay: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;}

一张图片实现圆角Box

系统：XP SP2；

浏览器：IE6,7、FF3.5、chrome3.0、opera9.63、Safari 4均无发现问题。

上面的效果大家是不是会经常用到，当然实现的方法也非常多样，这里我是用一张大的图片来实现：

当然，这个图片是越大越好，这样适应的范围也就越大，但是要考虑到太大了的话，文件就大，所以选择一个合适的大小也非常重要，我这里只是一个测试文件。

HTML代码：

我的时间

更多..

听说很多事情都是做出来的，不是想出来的。恩~~这个是谁说的呢？？

这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容。

我知道了。。。

CSS代码：

.block,.block dl,.block dl dt,.block dl dt .title{

background:url(images/block_bg.gif) no-repeat;

}

.block{

width:300px;

background-position:left bottom;

}

.block dl{

margin-left:5px;

background-position:right bottom;

}

.block dl dt{

height:33px;

margin-left:-5px;

background-position:left top;

}

.block dl dt .title{

height:33px;

line-height:33px;

font-weight:bolder;

font-size:14px;

margin-left:5px;

padding-left:5px;

background-position:right top;

}

.block dl dt .more{

float:right;

margin-top:-22px;

padding-right:10px;

}

.block dl dt .more a{

color:#473E2A;

}

.block dl dd{

padding:10px 10px 10px 5px;

line-height:1.5;

}

.block dl dd p{

margin-bottom:10px;

}

为了用最少的标签，所以有些标签省略了，只要有那些必要标签，仿照上面的HTML的结构就没有问题了。

大家只要把那个大的图片保存起来，就可以在自己的电脑上测试了。

纯CSS实现圆角框(无图片背景方式)

2010年03月10日星期三22:07

纯CSS实现圆角框是一件大家都说烂了的事件，我也写过两篇总结文章，为什么还会有这篇文章呢，事情是这样的。在我们的以前的项目中，实现圆角框往往是用背景图片来实现的，但是，当这些项目发布上线后，在维护过程中，有时需要添加一些新的需求，因为以前的项目中大量采用了圆角图片，并且这些图片全部采用了CSS sprites方式合并的图，为了不增加更多的额外工作，并且也不想用JS来添加更多的http请求，所以需要一些简单的CSS 方案来解决这个问题。而我的个人爱好，也喜欢采用无图片的方式来处理这些效果。总觉得CSS能完成的工作，为什么不让它来实现呢？

实现原理：

纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了，下面这个示意图是我将其中的一个圆角进行放大后的效果。

图一

从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。因此根据这个原理我们可以实现简单的html结构和样式。

相关主题
文本预览
相关文档
最新文档