CSS圆角框解决方案

合集下载

CSS绘制边框内圆角

CSS绘制边框内圆角作者：请叫我二狗哥如上图所示效果，外部为直角、内部为圆角的边框视觉效果。

由于border-radius属性可以实现内部圆角，重点在于外部直角的视觉效果。

方案一、外部嵌套<div class='container'><div><p>欢迎来到二狗哥的cnblogs博客</p></div></div>.container{background:hsl(30, 89%, 18%);padding:0.6em;font-size:16px;display:inline-block;}.container > div {border-radius:0.6em;background:tan;width:300px;padding:0.8em;}双重嵌套比较容易实现，需要使用两个元素。

倘若只有单一元素能否实现呢？答案是肯定的，往往同样的效果有多种CSS解决方案。

方案二、box-shadow与outline结合<div><p>欢迎来到二狗哥的cnblogs博客</p></div>div {margin:100px auto;font-size: 16px;border-radius: 0.6em;background: tan;width: 300px;padding: 0.8em;box-shadow:000.252em hsl(30, 89%, 18%);outline:0.6em solid hsl(30, 89%, 18%) ;}由于outline形成的轮廓边缘是矩形，并不是完全随着元素边框边缘进行，故而可以作为外部直角轮廓的实现效果。

<div class='test'></div>div.test{margin:100px auto;width:300px;height:200px;background:tan;border-radius:0.6em;outline:0.6em solid hsl(30, 89%, 18%);}可以看到使用outline属性后，圆角与outline轮廓中出现了未覆盖的白底色，需要通过box-shadow来进行覆盖。

纯CSS3实现圆角效果（含IE兼容解决方法）

纯CSS3实现圆⾓效果（含IE兼容解决⽅法）如今，这种利⽤CSS制作圆⾓的技术已经得到了⼤多数主流浏览器的⽀持，包括Safari，⾕歌浏览器，IE，Opera和⽕狐浏览器。

下⾯让我们来看看border-radius的语法，解释，以及IE是如何⽀持它的。

语法和说明在CSS3中⽤来⽣成圆⾓效果的属性是border-radius.这个属性跟⼤家熟知的width等属性的⽤法相似：复制代码代码如下:.roundElement {border-radius: 10px;}上⾯的这句代码的作⽤是设置⼀个元素的四个⾓的弧度半径值都为10px。

你也可以对每个⾓单独指定：复制代码代码如下:.pearElement {border-top-left-radius: 7px;border-top-right-radius: 5px;border-bottom-right-radius: 6px;border-bottom-left-radius: 8px;}如果你觉得上⾯的写法太复杂，可以使⽤下⾯border-radius简写的⽅法：复制代码代码如下:.oddRoundElement {border-radius: 12px 5px 12px 5px;/* or */border-radius: 12px 5px;}四个值分别代表的是top-left, top-right, bottom-right, bottom-left四个⾓。

各浏览器对border-radius的⽀持因为这种圆⾓技术是CSS3⾥出现的，⽼式浏览器或较早期的浏览器中⽤到这个属性时需要在CSS⾥添加浏览器引擎前缀(vendor prefixes)。

会是{prefix}-border-radius这样⼀个样⼦，⽽具体各种浏览器引擎前缀是下⾯这样的写法：复制代码代码如下:-moz-border-radius: 20px;-webkit-border-radius: 20px;-o-border-radius: 20px;</p> <p>/* ⽕狐浏览器 */-moz-border-radius-topleft:15px; /* top left corner */-moz-border-radius-topright:50px; /* top right corner */-moz-border-radius-bottomleft:15px; /* bottom left corner */-moz-border-radius-bottomright:50px; /* bottom right corner */-moz-border-radius:10px 15px 15px 10px; /* shorthand topleft topright bottomright bottomleft */</p> <p>/* webkit引擎的浏览器*/-webkit-border-top-left-radius:15px; /* top left corner */-webkit-border-top-right-radius:50px; /* top right corner */-webkit-border-bottom-left-radius:15px; /* bottom left corner */-webkit-border-bottom-right-radius:50px; /* bottom right corner */基本上，你需要对每种浏览器引擎做各⾃的声明，加上这些讨厌的稍微不同的代码来保证完全⽀持border-radius。

CSS可以设置圆角的方块_

CSS可以设置圆角的方块原来用CSS可以设置圆角的方块。

究其原理，是用3条长度不同的直线（或更多）叠在一起，模拟出这个弯曲的圆角，正如多边形可以组成圆形一样，只要边够多，就可以无限逼近一个圆。

===============================================================附网上找到的示例<html><head><title> 用CSS做圆角方块</title><style type="text/css">.roundBorder{display: block;}.roundBorder *{background: white;display: block;height: 1px;overflow: hidden;.roundBorderLayer1{border-left: 1px solid #C4C4C4; border-right: 1px solid #C4C4C4; margin: 0px 1px;}.roundBorderLayer2{border-left: 1px solid #D3D4D5; border-right: 1px solid #D3D4D5; margin: 0px 2px;padding: 0px;}.roundBorderLayer3{background: #C4C4C4;border-left: 1px solid #D3D4D5; border-right: 1px solid #D3D4D5; margin: 0px 3px;}.roundContent{background:white;border-left: 1px solid #C4C4C4; border-right: 1px solid #C4C4C4; overflow: hidden;padding: 4px 10px;}</style></head><body><b class="roundBorder"><b class="roundBorderLayer3"></b> <b class="roundBorderLayer2"></b> <b class="roundBorderLayer1"></b> </b><div class="roundContent">Hello!!<br/>用CSS做圆角方块<br/>真的很简单</div><b class="roundBorder"><b class="roundBorderLayer1"></b> <b class="roundBorderLayer2"></b> <b class="roundBorderLayer3"></b></b></body></html>。

使用纯CSS实现圆角边框并完美兼容

使⽤纯CSS实现圆⾓边框并完美兼容纯CSS实现圆⾓框是⼀件⼤家都说烂了的事件，我也写过两篇总结⽂章，为什么还会有这篇⽂章呢，事情是这样的。

在我们的以前的项⽬中，实现圆⾓框往往是⽤背景图⽚来实现的，但是，当这些项⽬发布上线后，在维护过程中，有时需要添加⼀些新的需求，因为以前的项⽬中⼤量采⽤了圆⾓图⽚，并且这些图⽚全部采⽤了CSS sprites⽅式合并的图，为了不增加更多的额外⼯作，并且也不想⽤JS来添加更多的http请求，所以需要⼀些简单的CSS⽅案来解决这个问题。

⽽我的个⼈爱好，也喜欢采⽤⽆图⽚的⽅式来处理这些效果。

总觉得CSS能完成的⼯作，为什么不让它来实现呢？实现原理：纯CSS⽅式实现圆⾓框的原理在⽹络上已经有很多⼈详细解说了，下⾯这个⽰意图是我将其中的⼀个圆⾓进⾏放⼤后的效果。

图⼀从上⾯效果图中我们可以看到其实这种圆⾓框是靠⼀个个容器堆砌⽽成的，每⼀个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。

因此根据这个原理我们可以实现简单的html结构和样式。

1、Html结构层：b1~b4构成上⾯的左右两个圆⾓结构体，⽽b5~b8则构建了下⾯左右两个圆⾓结构体。

⽽content则是内容主体，将这些全部放在⼀个⼤的容器中，并给它的⼀个类名sharp，⽤来设置通⽤的样式。

再给它叠加了⼀个color1类名，这个类名⽤来区别不同的颜⾊⽅案，因为可能会有不同颜⾊的圆⾓框。

2、CSS样式：将每个b标签都设置为块状结构，并定义其⾼度为1像素，超出部分溢出隐藏。

从上⾯样式中我们已经看到margin值的设置，是从⼤到⼩减少的。

⽽b1和b8的设置是⼀样，已经将它们合并在⼀起了，同样的原理，b2和b7、b3和b6、b4和b5都是⼀样的设置。

这是因为上⾯两个圆和下⾯的两个圆是⼀样，只是顺序是相对的，所以将它合并设置在⼀起。

CSS实现圆角边框代码兼容IE、火狐

CSS实现圆角边框代码兼容IE、火狐圆角边框可以用图片实现，也可以用CSS实现。

如果用图片做的话，就画好圆角然后设置成背景图片。

用CSS不需要图片，直接用代码定义颜色。

用图片的话，会影响网页打开速度，当然如果图片不大，影响也并不明显。

用CSS不会影响网页打开速度，但是实现方法略麻烦，要写不少代码。

不好讲哪个更好哪个更差，用到各自适合的地方就行了。

这里介绍两种不用图片，直接用CSS实现圆角边框的方法。

两种CSS方法原理类似，都是在一个层上加二个或更多层，不过这些层只有左右边线，上边线和下边线有背景色，都有一定的长度差距差，从而呈现出圆角边框的效果。

方法一：CSS样式定义，放在网页前部。

绿色字是注释，红色字是可自行更改的颜色编码。

有关CSS的overflow和border-radius的那些事，你的圆角被覆盖了吗？

有关CSS的overflow和border-radius的那些事，你的圆角被覆盖了吗？最初是网友的一个提问，来自于我的知识星球社区：说实话，不得不佩服这个网友的眼力，这么小的细节都能发现。

不过这也正是 FineUI 一直前进的动力，来自社区的监督和促进。

从截图上看，貌似圆角部分被内部节点覆盖了。

换句话说：外部的圆角没有截断内部的元素！由于这位网友测试的是 Cupertino 主题，圆角只有 6px，不大明显：换成 Le Frog 主题，这个问题就更加突出了：分析问题对于这个问题，有几种可选的解决办法：1. 去除窗体控件的圆角边框，毕竟操作系统的窗体都是直角的，这个应该也无可厚非（只不过这个改动和之前不一致，肯定会勾起部分用户的不满情绪）2. 给内部节点元素也加上圆角边框，防止内部节点的覆盖父节点的圆角边框第二个方式倒是可行的方案，在浏览器调试工具中尝试如下：由于外层节点 .f-panel 拥有 CSS 样式类 f-corner-all：.f-corner-all {border-radius: 6px;}这里给内部的 .f-panel-header 增加一个样式类 f-corner-top：.f-corner-top {border-top-right-radius: 6px;border-top-left-radius: 6px;}似乎已经完美解决这个问题了。

其实不然，由于窗体内部的结构比较复杂，比如存在底部工具栏的情况（底部工具栏又可能有多个）：因此，判断哪个元素位于最下面，是正文元素，还是某个工具栏控件，就是一个麻烦事。

并且还存在用户动态显示隐藏工具栏的情况，这就更增加了复杂度。

所以这个问题我迟迟没有动手修改。

直到有一天，我突然发现，同是Cupertino 主题，下拉菜单的圆角边框是正常的，不信你来看（单田芳说）：解决问题我似乎看到了问题解决的希望，同一个主题，有个地方正常，有的地方不正常，是是否比较两者的差异了！经过仔细对比，问题逐步浮出水面，却原来下拉菜单有这么个CSS属性：.f-menu {overflow: auto;}而窗体控件没有定义overflow 属性，我们看下浏览器缺省的overflow 属性：原来，如果未定义 overflow 属性，那么节点的这个属性默认值是visible（有点出乎意料，我还以为是 auto 呢）。

无懈可击的CSS圆角技术

无懈可击的CSS圆角技术处理圆角需要对四张图片的合适安置—每个圆角用一张。

每个圆角都要独立出来，以便框能够在各个方向伸展。

于是，四张图片就意味着需要四个HTML对象来作为背景图片的载体...是不是觉得有点难度呢？嘿嘿，下文会带您详细的说明～要一个宽度不固定的框，事情变得有些复杂了。

宽度不固定，就意味着这个框在水平和垂直方向都有足够灵活的变化。

为什么说这更难一些呢？因为它需要对四张图片的合适安置——每个圆角用一张。

每个圆角都要独立出来，以便框能够在各个方向伸展。

于是，四张图片就意味着需要四个HTML 对象来作为背景图片的载体。

有一些实现办法包括在样式表中使用“生成内容”，即使用：before和:after伪类来为单独的一个对象加上多张背景图。

这种方法的问题在于，在编写本书的时候，Internet Explore(IE)还不支持“生成内容”，因些相当大数量的用户就将无法看到圆角效果。

那怎么办呢？如果一个固定的宽度已经预先确定，那就能很容易地使用本章上一节中给出的那种方法，只背景图片：一张用于显示顶部的左右圆角，另一张显示底部的左右圆角。

准备好两个HTML对象来做图片载体并不是难题。

可是当要求实现宽度不固定的框时，为了让IE用户也能看到一样的设计效果，那就是加上额外的HTML代码了。

圆角化以下是Web标准的能人，也是本书的技术编辑Ethan Marcotte在解决Browse Happy网站所面临这样的问题时的做法（图1）图1Ethan 用了一个圆角框来显示用户“已经切换使用”的某个兼容Web标准的浏览器，包括软件名称和图标（图2）。

图2 这个圆角矩形框可以往任何方向扩展Ethan 没有给框设定固定的宽度，而使用了一种对前面提到过的“滑动门”技术的变通方法，使得当内容文字增多（或增大）时，框在水平和竖直方向都能伸缩（图3）。

图3 当文字变大时，框会在水平和竖直方向扩展，同时能保持圆角形状不变我们现在来基于Ethan所使用的技术，构建另一个示例，它将是一个具有真正灵活性的框，能容纳其内部的任何东西。

css圆角不圆和1px方案

css圆⾓不圆和1px⽅案1.圆⾓不圆⽐如需要我们画⼀个 r 为 5px 的圆，如果我们使⽤ rem 作为单位，我们很快会发现在⼀些机型上的图案不圆，会呈现椭圆形。

这是由于 rem 转 px 会存在精度丢失问题。

所以这个时候我们就需要使⽤ px 配合 dpr 来实现：.circle(@size,@backgroundColor){ width:@size; height:@size; background-color:@backgroundColor; [data-dpr='1']&{ width:@size*0.5; height:@size*0.5; } [data-dpr='3']&{ width:@size*1.5; height:@size*1.5; }}2.1px 细线问题1.使⽤伪类 + transform.border_bottom{ overflow:hidden; position:relative; border:none!inportant;}.border_bottom:after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background-color:#d4d6d7; -webkit-transfrom-origin:0 0; transfrom-origin:0 0; -webkit-transform:scaleY(0.5); transform:scaleY(0.5);}使⽤box-shadow模拟.border_bottom{ box-shadow:inset 0px -1px 1px -1px #d4d6d7;}3. 从 html 元素继承 box-sizing在⼤多数情况下我们在设置元素的 border 和 padding 并不希望改变元素的 width,height值，这个时候我们就可以为该元素设置 box-sizing:border-box;。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

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

纵观种种方法，各有其优势，请针对不同的环境分别使用。

圆角框，因为其样式比直角框漂亮，所以成为设计师心中偏爱的设计元素。

现在的web标准下大量的网页、博客都采用圆角框设计，成为一道亮丽的风景线。

然而，就是这个圆角，却成为了网页前端人员心中永远抹之不去的阴影，对它，可以说是又痛又爱。

爱的是它的漂亮，痛的是要让它兼容通行于各种不同的浏览器却成为一个永远的神话。

目前网络流行的解决方案：１，无图片纯css圆角框收录理由：兼容性强，不用图形特点：1.不用任何图形，使用很多个div容器模拟出圆角效果。

2.兼容性：通杀所有浏览器缺点：1.构造这个圆角需要加入太多的无语义的标签，结构比较冗余。

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

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

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

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

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

实例演示：/boxes/snazzy.html２，无图片纯css圆角框，用特殊字符（&bull）收录理由：圆滑，不用图形特点：1.不用任何图形，使用特殊字符•（圆点）模拟出圆角。

2.兼容性：通杀所有浏览器3.圆角平滑缺点：1.构造这个圆角一样需要加入无语义的标签，结构冗余，同第一种一样。

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

3.颜色虽可调节，但要求里面的背景色和字符的颜色相同，不能做成边框线条。

适用于色彩单一并且一个页面中圆角不是太多的页面。

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

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

实例演示：/boxes/curves.html３，图片圆角框收录理由：兼容性强，可以表现很复杂的圆角效果。

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

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

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

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

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

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

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

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

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

实例演示：/boxes/three_cornered.html４，利用VML绘制圆角（ie only）收录理由：无图片，平滑，可加阴影边框特点：1.不用任何图形。

2.兼容性：只能在IE中使用3.圆角半径随意调整4.重用性强：多个圆角任意调用。

5.圆角颜色随意设置。

6.结构无冗余。

7.圆角平滑无锯齿。

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

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

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

<v:roundrectid=”roundbox”class=”circle”strokecolor=”red”strokeweight=”2px”arcsize=”0.08″></ v:roundrect >注意加入引用空间：<html xmlns:v xmlns=”/1999/xhtml”>这是兼容的用法，xmlns:v一定不能少，否则。

样式表中加入这一句话：v”:*{behavior:url(#default#VML);display:inline-block;}Arcsize为半径Strokeweight为边框线宽度Strokecolor为边框线的颜色实例演示：（请在IE系列浏览器下查看本实例）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns:v xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>VML画平滑圆角框</title><style> v\:*{behavior:url(#default#VML);display:inline-block;}body{ background-color:#99FFFF;font-size:12px;}.circle{ height:130px; width:300px; padding-top:8px; margin:0px auto; z-index:2; margin-left:340px; }h1{border-bottom:2px red solid;font-size:12px;margin:4px;text-indent:1em;height:20px;}div{font-size:12px;padding:10px;}</style></head><body><v:roundrect id="roundbox" class="circle" strokecolor="red" strokeweight="2px" arcsize="0.08"><h1>VML画平滑圆角</h1><div class="t1"> 使用IE专用的VML来画平滑圆角框，还可以画出阴影效果。

就其图形表现来说，是非常完美的。

</div><v:shadow on="t" color="#777" opacity="52428f" offset="1.5pt,1.5pt"/> </v:roundrect></body></html>提示：你可以先修改部分代码再运行。

５，利用私有属性绘制圆角（FF3 only）收录理由：平滑无锯齿特点：1.不用任何图形。

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

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

5.圆角颜色随意设置。

6.结构无冗余。

7.圆角平滑无锯齿。

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

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

实现原理：使用FF3专用的私有属性来画出圆角。

只用两种属性就能体现圆滑的圆角框-moz-border-radius:10px;/*圆角半径*/Border:5px red solid;/*边框大小*/实例演示：（请在FF3浏览器下观看，其它浏览器不支持）<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>FF3下的圆角框</title> <style type="text/css"> body{background:#CCCCCC;} .round{ -moz-border-radius:20px;/*半径*/ border:4px solid #333;/*边框宽度*/ margin:50px auto;width:30%;height:150px;font-size:12px; } h1{border-bottom:4px #333 solid;font-size:12px;width:100%;padding:5px 0;text-indent:1em;} .context{font-size:12px;padding:10px;} </style> </head> <body> <div class="round"> <h1>FF3私有属性画的圆角框</h1> <div class="context"> <p>FF3下的圆角框两个属性就可以解决:</p> <p>-moz-border-radius：半径</p> <p>border：边框</p> </div> </div> </body> </html>提示：你可以先修改部分代码再运行。

６，无图片脚本圆角框（js半完美解决方案）这种方案目前应该是比较完美的方案了。

特点：1.不用任何图形。

2.兼容性：通杀所有浏览器3.圆角半径随意调整4.重用性强：多个圆角任意调用。

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

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