健康资讯 0、以下是有关CSS3圆角的讲解：
CSS3中看到了几种新的属性和方法，用来创建圆角边框，使得网页中的边框变得更加平滑、优雅。
1、CSS3的圆角属性
CSS3中的圆角属性主要有border-radius,border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius。如果你想实现一个边框均匀圆角，你可以只指定一个属性border-radius，而另外4个属性可以进行调整，实现不同圆角效果。
2、如何使用圆角属性
圆角属性的使用很简单，只需要给元素添加对应圆角属性，并设置圆角大小就可以实现圆角边框效果。如下面的实例validation添加border-radius：10px，就可以实现图中的各种圆角效果：
.validation {
border-radius: 10px; //给元素添加圆角，半径为10px
}
3、CSS3圆角的浏览器兼容性
随着CSS3的流行，各大浏览器的兼容性也在不断的改进，圆角属性也是如此，大多数常见的浏览器都能够实现圆角效果，以下表格列出了各个浏览器对CSS3 border-radius属性的支持情况。
浏览器 版本 支持情况
Firefox 5+ 支持
Chrome 4+ 支持
Internet
Explorer 9+ 支持
Safari 3.1+ 支持
Opera 10.5+ 支持
4、 CSS3圆角的优势
（1）使网页边框更加优雅漂亮；
（2）方便开发者处理圆角边框，精简代码；
（3）降低重复繁琐的代码编写；
（4）可以使用非常简单的css3实现精致的圆角效果。
（5）大大简化了制作各种形状，特殊主题网页页面的工作量。
5、CSS3圆角的应用
圆角效果主要应用于流行、精美的网页效果，它很好地美化网页边框，圆润自然，添加现代设计的精湛视觉冲击力。
目前它的应用已经从边框的圆角扩展到图片边框、按钮边框等，并且，在细节方面，以灰度阴影为边框另添绚丽夺目的完美效果，更是给网页添加了无穷的现代魅力，提升网页设计的视觉层次、抓住用户的感官和心理，从而大大提高网页设计的可读性和点击率。
一、CSS3圆角的基础
1、 CSS3中的圆角本质是通过使用border-radius 属性来实现的，border-radius可以设置四个值，分别为左上圆角、右上圆角、左下圆角和右下圆角，分别用“上、右、下、左”来控制，如果所有角都设置成一样的半径，那么可以使用一个值来控制。
2、使用border-radius圆角属性时可以控制曲线的弧度的大小，设置的值可以为 px (像素) 或 em (单位)，表示的是元素的半径大小。如果设置为50%，则会自动将半径设置成该元素宽度或高度的一半（具体情况取决于宽高的值），形成一个圆形元素。
二、CSS3圆角的定位
1、CSS3中的圆角可以用来定位，使用position: absolute属性，可以将元素定位到任意位置，并且可以通过border-radius属性来调整元素圆角的半径，增加视觉效果。
2、使用CSS3中的圆角定位时，元素的宽度和高度将会影响元素的圆角半径，如果元素宽度或高度发生变化，半径也将改变，从而调节圆角的大小。
三、CSS3圆角的填充
1、CSS3中的圆角可以用来填充，当使用background-image或background-color填充背景时，可以使用border-radius属性设置圆角的半径，使元素拥有圆角的外观。
2、使用background-image和border-radius可以创建半圆形的元素，圆角的半径可以使用px、em、依照宽高的百分比的形式来设置。通过调整圆角的半径大小，可以让背景有过渡的效果。
四、CSS3圆角的变形
1、CSS3中的圆角可以用来实现变形，如将element.style.transform属性设置为“scaleX(0.5)”，可以将一个正方形元素缩小一半，使用border-radius属性可以使元素拥有圆角的外观，从而实现变形的效果。
2、元素的形状可以定制，使用border-radius可以制作矩形、椭圆等几何形状，通过修改border-radius的值，可以调节元素的形状，比如圆角、四个角、三个角等。
