2024年6月6日发(作者：)
CSS3 经典教程系列：CSS3 圆角
（border-radius）详解
《CSS3 入门教程系列》前一篇文章详细介绍了 CSS3 RGBA 特性的用法，今天
这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性
的具体用法。
以前制作圆角效果，我们都需要使用多张圆角图片做为背景分别应用到每
个角上，我应用最多的就是在需要圆角的元素标签中加四个空标签，然后在每
个空标签中应用一个圆角的背景位置，然后在对这几个应用了圆角的标签进行
定位到相应的位置，非常繁琐。
您可能感兴趣的相关文章
Web 开发人员和设计师必读文章推荐
20个非常绚丽的 CSS3 特性应用演示
35个让人惊讶的 CSS3 动画效果演示
推荐12个漂亮的 CSS3 按钮实现方案
24款非常实用的 CSS3 工具终极收藏
现在有了 CSS3 的 border-radius 特性之后，实现边框圆角效果就非常简
单了，而且其还有多个优点：一是减少网站维护工作量；二是提高了网站的性
能，少了对图片的 HTTP 的请求，网页载入速度将变快；三是增加视觉美观性。
既然 border-radius 有这么多好处，我们就从他的语法，属性和属性值等
方面来看其如何应用，又是如何制作圆角，还有就是除了制作圆角他还能制作
什么？有这么多，那我们就开始吧：
基本语法：
border-radius ： none |
取值范围：
简单说明：
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。
前面，我们主要看了 border-radius 的缩写格式，其实 border-radius
和 border 属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，
这里我规纳一点，他们都是先Y轴在X轴，具体看下面：
?
border-top-left-radius:
1
border-top-right-radius:
2
3
border-bottom-right-radius:
4
border-bottom-left-radius:
这里说一下，各角拆分出来取值方式：
圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，
这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这 个角就不
是圆角。
发布评论