css3新特性--圆角(大全)

CSS3属性之圆⾓效果——border-radius属性在css3之前，要实现圆⾓的效果可以通过图⽚或者⽤margin属性实现(可以参考这⾥：)。

实现过程很繁琐，但CSS3的到来简化了实现圆⾓的⽅式。

CSS3实现圆⾓需要使⽤border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。

1 2 3 4-webkit-border-radius -moz-border-radius -ms-border-radius-o-border-radius　border-radius属性其实可以分为四个其他的属性：1 2 3 4 5border-radius-top-left/*左上⾓*/ border-radius-top-right/*右上⾓*/ border-radius-bottom-right/*右下⾓*/ border-radius-bottom-left/*左下⾓*/ //提⽰：按顺时针⽅式下⾯⽤⼏个实例来展⽰border-radius的具体⽤法。

1、border-radius单个属性值：1 2//HTML清单<div class="roundedCorner">1 2 3 4 5 6.roundedCorner{width:100px;height:100px;background-color:#f90;border-radius:10px;//左上，右上，右下，坐下都是10px }效果：2、border-radius是个属性值⽅式：1 2 3 4 5 6 7<div class="roundedCorner2"></div><br/><br/><br/>//HTML清单.roundedCorner2{width:100px;height:100px;background-color:#f99;border-radius:20px10px5px2px;}　效果：不过在开发的过程中(我的⼯作中),经常⽤到的是border-radius单属性值，设置4个不同圆⾓的情况很少。

纯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。

border-radius属性以下内容摘于百度经验。

border-radius圆⾓边框是CSS3的新属性，以前⽹页设计开发中要实现元素的圆⾓边框，通常是⽤背景图⽚来实现的。

现在我们只需要给元素添加border-radius属性即可。

⼀.兼容性它是CSS3的新属性，兼容IE9+，Firefox 4+、Chrome、Safari 5+ 以及 Opera浏览器，对于⼀些较低版本的浏览器，我们可以添加相应的浏览器前缀来兼容。

div {width: 500px;height: 300px;border: 1px solid black;-webkit-border-radius: 50%;-moz-border-radius: 50%;-o-border-radius: 50%;-ms-border-radius: 50%;}⼆.语法语法：border-radius：length/persentage；js语法：object.style.borderRadius="5px"它的属性参数值表⽰有多种⽅式，下⾯就为⼤家⼀⼀介绍。

最常见的⼀种表现形式是⼀个值。

如border-radius:6px;它表⽰元素四个⽅向的圆⾓⼤⼩都是6px，即每个圆⾓的“⽔平半径”和“垂直半半径”都设置为6px；1. 四个属性值，分别表⽰左上⾓、右上⾓、右下⾓、左下⾓的圆⾓⼤⼩（顺时针⽅向）border-radius：10px 20px 30px 40px;2. 三个属性值，第⼀个值表⽰左上⾓，第⼆个值表⽰右上⾓和左下⾓（对⾓），第三个值表⽰右下⾓。

border-radius:10px 30px 60px;3. 两个属性值，第⼀个值表⽰左上⾓和右下⾓，第⼆个值表⽰右上⾓和左下⾓。

border-radius:20px 40px;4. 斜杠⼆组值：第⼀组值表⽰⽔平半径，第⼆组值表⽰垂直半径，每组值也可以同时设置1到4个值，规则与上⾯相同。

CSS3圆⾓CSS3 圆⾓⼀、CSS3 圆⾓⼆、浏览器⽀持表格中的数字表⽰⽀持该属性的第⼀个浏览器的版本号。

-webkit- 或 -moz- 前⾯的数字表⽰⽀持该前缀的第⼀个版本。

三、CSS3 border-radius 属性使⽤ CSS3 border-radius 属性，你可以给任何元素制作 "圆⾓"。

以下为三个实例：1. 指定背景颜⾊的元素圆⾓：2. 指定边框的元素圆⾓:3. 指定背景图⽚的元素圆⾓:代码如下:#rcorners1 {border-radius: 25px;background: #8AC007;padding: 20px;width: 200px;height: 150px;}#rcorners2 {border-radius: 25px;border: 2px solid #8AC007;padding: 20px;width: 200px;height: 150px;}#rcorners3 {border-radius: 25px;background: url(paper.gif);background-position: left top;background-repeat: repeat;padding: 20px;width: 200px;height: 150px;}四、CSS3 border-radius - 指定每个圆⾓如果你在 border-radius 属性中只指定⼀个值，那么将⽣成 4 个圆⾓。

但是，如果你要在四个⾓上⼀⼀指定，可以使⽤以下规则：四个值: 第⼀个值为左上⾓，第⼆个值为右上⾓，第三个值为右下⾓，第四个值为左下⾓。

三个值: 第⼀个值为左上⾓, 第⼆个值为右上⾓和左下⾓，第三个值为右下⾓两个值: 第⼀个值为左上⾓与右下⾓，第⼆个值为右上⾓与左下⾓⼀个值：四个圆⾓值相同1，以下为三个实例:（1）四个值 - border-radius: 15px 50px 30px 5px:（2）三个值 - border-radius: 15px 50px 30px:（3）两个值 - border-radius: 15px 50px:以下为源代码:#rcorners4 {border-radius: 15px 50px 30px 5px;background: #8AC007;padding: 20px;width: 200px;height: 150px;}#rcorners5 {border-radius: 15px 50px 30px;background: #8AC007;padding: 20px;width: 200px;height: 150px;}#rcorners6 {border-radius: 15px 50px;background: #8AC007;padding: 20px;width: 200px;height: 150px;}2，还可以创建椭圆边⾓:（1）椭圆边框 - border-radius: 50px/15px:（2）椭圆边框 - border-radius: 15px/50px:（3）椭圆边框 - border-radius: 50%:以下为源代码:#rcorners7 {border-radius: 50px/15px;background: #8AC007;padding: 20px;width: 200px;height: 150px;}#rcorners8 {border-radius: 15px/50px;background: #8AC007;padding: 20px;width: 200px;height: 150px;}#rcorners9 {border-radius: 50%;background: #8AC007;padding: 20px;width: 200px;height: 150px;}五、CSS3 圆⾓属性。

css3梯形的圆角摘要：1.CSS3 中梯形的圆角实现2.圆角梯形的代码实例3.兼容各种浏览器的圆角边框代码4.如何实现圆角矩形旋转45 度5.用CSS3 transform 实现梯形正文：在CSS3 中，我们可以使用transform 属性来实现梯形的圆角效果。

具体做法是使用perspective 属性设置梯形的视角，然后使用rotateX 和rotateY 属性分别旋转梯形的x 轴和y 轴，最后使用translateZ 属性平移梯形，使其呈现出圆角的效果。

以下是一个简单的代码实例：```html<!DOCTYPE html><html><head><meta charset="utf8"><title>CSS3 梯形圆角</title><style type="text/css">.yj {padding: 10px;width: 300px;height: 50px;border: 2px solid #000000;-moz-border-radius: 15px;-webkit-border-radius: 15px;-webkit-transform: perspective(20px) rotateX(-1deg) rotateY(-2deg) translateZ(0);-moz-transform: perspective(20px) rotateX(-1deg) rotateY(-2deg) translateZ(0);-ms-transform: perspective(20px) rotateX(-1deg) rotateY(-2deg) translateZ(0);-o-transform: perspective(20px) rotateX(-1deg) rotateY(-2deg) translateZ(0);transform: perspective(20px) rotateX(-1deg) rotateY(-2deg) translateZ(0);}</style></head><body><div class="yj"></div></body></html>```在这个示例中，我们使用了-webkit-transform、-moz-transform、-ms-transform 和-o-transform 属性来实现梯形的圆角效果，这样可以保证在各种浏览器中都能正常显示。

纯代码实现CSS圆⾓我这⾥说的是纯代码，是指的不使⽤图⽚实现圆⾓，图⽚实现圆⾓，这⾥就不说了。

纯代码实现圆⾓主要有3种⽅法：第⼀种：CSS3圆⾓#chaomao{border-radius:2px 2px 2px 2px;}上⾯代码的意思是左上、右上、右下、右下分别2px的圆⾓当然也可以简写：border-radius:2px⽅向是从左上到左下逆时针也可以分别指定#chaomao{border-top-left-radius:4px 2px;border-top-right-radius:3px 4px;border-bottom-right-radius:6px 2px;border-bottom-left-radius:3px 4px;}意思很简明⽕狐等浏览器也⽀持⾃⼰的私有圆⾓属性Firefox⽀持border-radius(圆⾓)：-moz-border-radius:2pxwebkit内核的Safari和Chrome⽀持border-radius(圆⾓)：-webkit-border-radius:2pxOpera⽀持border-radius(圆⾓)：border-radius:2pxCSS3实现圆⾓最简单了，可惜IE6-8不⽀持第⼆种：⽤CSS+html代码百度知道的⾸页圆⾓就是⽤这种⽅法实现的有点：兼容所有浏览器，缺点：需要添加额外的HTML标签，维护⽐较⿇烦实现原理是利⽤多个空层，上⾯⼀层⽐下⾯少1px，从⽽使边⾓看起来是⼀个圆弧状HTML代码：<div><strong class="b1"></strong><strong class="b2"></strong><strong class="b3"></strong><strong class="b4"></strong><div class="content">⽂字内容</div></div>CSS代码b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px;font-size:1px;overflow:hidden;display:block;}.b1,.b8{margin:0 5px;}.b2,.b7{margin:0 3px;border-right:2px solid;border-left:2px solid;}.b3,.b6{margin:0 2px;border-right:1px solid;border-left:1px solid;}.b4,.b5{margin:0 1px;border-right:1px solid;border-left:1px solid;height:2px;}第三种：利⽤jQuery圆⾓插件代码实现圆⾓优点：兼容所有浏览器缺点：需要使⽤jQuery插件这是⼀个jQuery插件，使⽤的时候，需要jQuery⽂件⼀起，使⽤⽅法很简单$("#chaomao").corner("5px")它就实现了id值问哦chaomao的元素，5px的圆⾓。

CSS实现圆角的三种方法方法一：border-radius属性border-radius属性是CSS3引入的新属性，可以用来设置元素的圆角效果。

通过设置border-radius属性，可以将元素的边框角变为圆角。

border-radius属性的语法如下：border-radius: <length>，<percentage>，[<length>，<percentage>]{1,4}[/ <length>，<percentage>]{0,2}其中，<length>表示长度值，可以是数值或使用像素、百分比等单位。

<percentage>表示百分比值。

方括号表示可选项，花括号中的数字表示可重复的次数。

斜杠后的部分表示可选的内切椭圆半径。

例如，要给一个元素设置4个角的圆角效果，可以使用以下代码：```cssborder-radius: 10px;```此代码将元素的4个角都设置为10像素的圆角。

方法二：border-image属性border-image属性也是CSS3引入的新属性，用于将图片应用到元素的边框上，同时也可以实现圆角效果。

border-image属性的语法如下：border-image: <source>，<slice>[<width>，<outset>]?[<repeat>]?，inherit其中，<source>表示图片的路径。

<slice>表示图片的裁剪区域。

<width>表示图片的宽度。

<outset>表示边框图像区域超出边框的距离。

<repeat>表示是否重复显示边框图像。

例如，要给一个元素设置圆角效果并使用图片作为边框，可以使用以下代码：```cssborder-image: url(border.png) 30 round;```此代码将会把border.png这张图片应用到元素的边框上，并且设置一个30像素的裁剪区域，使得图片能够以圆角形式显示。

css3圆角属性border-radius如何用css3圆角属性border-radius如何用在网页设计与制作中，我们常常用css3来实现相关效果，以减页面大小、方便修改等。

在相关效果中，我们常常需要实现边框圆角的效果，以前的做法是直接切图，但现在我们可以通过css3的border-radius属性实现了。

相比以前用切图实现圆角效果，现在通过css3的border-radius 特性，不仅可以提高网站性能、减少网站维护工作量而且还可以让我们的网页UI更加美观。

其实，border-radius 是一种缩写，其值分别按照top-left、top-right、bottom-right、bottom-left的顺序设置，主要会有下面几种情形出现：1、只有一个值，那么top-left、top-right、bottom-right、bottom-left 四个值相等。

2、有两个值，那么top-left 和bottom-right相等，并且取第一个值；top-right 等于bottom-left，并且取第二个值。

3、有三个值，其中第一个值是设置top-left；而第二个值是top-right 和bottom-left；第三个值是设置bottom-right。

4、有四个值，其中第一个值是top-left；而第二个值是top-right；第三个值bottom-right ；第四个值是设置bottom-left。

其实css3的border-radius特性和border 属性一样，还可以把各个角单独拆分出来，也就是以下四种写法：border-top-left-radius: //左上角border-top-right-radius: //右上角border-bottom-right-radius: //右下角border-bottom-left-radius: //左下角css3的border-radius支持的浏览器有：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 支持border-radius 标准语法格式，而对于老版的浏览器，border-radius 需要根据不同的浏览器内核添加不同的前缀，比说Mozilla 内核需要加上“-moz”，而Webkit 内核需要加上“-webkit”等。

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中可以使用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属性来分别设置元素的左上角、右上角、右下角和左下角的圆角半径。