css3属性border-radius详解

本是古典何须时尚 2022-07-15 00:08 330阅读 0赞

**border-radius**，国内翻译成圆角，你可能以为这个属性就是用来画圆角，没错，但是除此之外，它还可以做点别的事情。radius其实指的是边框所在圆的半径，这个CSS3属性不仅能够创建圆角，还可以创建椭圆角（如图下图第7），把这些角按照不同的顺序和大小来展现，能够绘制成多种多样的图形。以下图例就是通过定义border-radius得到的效果。

![20161025224700548][]

#### 基本语法： ####

border-radius ： none | <length>\{1,4\} \[/ <length>\{1,4\} \]

#### 取值范围： ####

<length>： 由浮点数字和单位标识符组成的长度值。不可为负值。

#### 简单说明： ####

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。

对于每个角的两个值，分别代表的是该角的水平方向和垂直方向的半径:

![20161025225142837][]

#### 边框大小和外半径、内半径的关系(我们设置的值就是外半径) ####

实际的内半径相当于外半径减去相应的边框大小。相减的值中如果至少一个为为负值或零，则内半径为直角。不管怎样，相邻的两个边都会形成流畅的线条。（请看下图）

![20161025225346363][]

注意：border-radius的百分比就是相对于border box的宽度和高度的百分比，比如一个边长为150的正方形格子，border-radius:50%就等于border-radius:75px,此时是一个标准圆：

![20161026201301386][]

转载自：https://segmentfault.com/a/1190000002545712

http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-border-radius.html

[20161025224700548]: /images/20220715/52659738496e46998e31418d6ef8b545.png
[20161025225142837]: /images/20220715/fba8e57e644548c5a81f222e18de1730.png
[20161025225346363]: /images/20220715/30d3a93966f14b3ab5d13cea56fa8dfc.png
[20161026201301386]: /images/20220715/dab3b4245c5b4371b2a482ee8634bf19.png