背景知识：css
border-radius 属性的基本用法。css3
难题：app
你可能注意到过，给任何正方形元素设置一个足够大的 border-radius，就能够把它变成一个圆形。所用到的 CSS 代码以下所示： ide
图1.1给元素设置固定宽高以及一半长度的 border-radius，能够获得一个圆形字体
你可能还注意到了，若是指定任何大于 100px 的半径，仍然能够获得一个圆形。规范特别指出了这其中的缘由：网站
“当任意两个相邻圆角的半径之和超过 borderbox 的尺寸时，用户代理必须按比例减少各个边框半径所使用的值，直到它们不会相互重叠为止。”——CSS 背景与边框（第三版）（http://w3.org/TR/css3-background/#corner-overlap）spa
不过，咱们每每不肯意对一个元素指定固定的宽度和高度，由于咱们但愿它能根据其内容自动调整并适应，而内容的长短不可能在事先就知道。即便是在设计一个静态网站的时候（元素的内容能够预先肯定），咱们也可能须要在某个时刻改变其内容；或者咱们为它准备了一款尺寸略有差别的回退字体，而不一样字体对相同内容的渲染结果极可能是不一样的。在这个案例中，咱们一般指望达到这个效果：若是它的宽高相等，就显示为一个圆；若是宽高不等，就显示为一个椭圆。但是，咱们前面的代码并不能知足这个指望。当宽度大于高度时，咱们获得的形状如图1.2所示。那咱们到底能不能用 border-radius 来产生一个椭圆，甚至是一个自适应的椭圆呢？设计
图1.2在前面的圆形示例中，当高度小于宽度时发生的状况；border-radius 所产生的圆形用虚线标示。代理
解决方案：blog
说到 border-radius，有一个不为人知的真相：它能够单独指定水平和垂直半径，只要用一个斜杠（/）分隔这两个值便可。这个特性容许咱们在拐角处建立椭圆圆角（参见图1.3）。所以，若是咱们有一个尺寸为 200px×150px 的元素，就能够把它圆角的两个半径值分别指定为元素宽高的一半，从而获得一个精确的椭圆：
图1.3一个容器设置了不相等的水平和垂直 border-radius；拐角处的弧线如今呈现出椭圆的形状，这个椭圆的水平和垂直半径就是咱们为 border-radius 指定的值，在图中用虚线标示。
图1.4经过非对称的 border-radius 曲线来建立一个椭圆。
咱们能够在图1.4中看到结果。可是，这段代码存在一个很大的缺陷：只要元素的尺寸发生变化，border-radius 的值就得跟着改。咱们在图3-5中能够看到，当元素的尺寸变为 200px×300px 时，若是 border-radius 没有跟着改变，会发生什么后果。所以，若是咱们的元素尺寸会随着它的内容变化而变化，这就是一个问题了。难道咱们真的走投无路了吗？其实，border-radius 这个属性还有另一个不为人知的真相，它不只能够接受长度值，还能够接受百分比值。这个百分比值会基于元素的尺寸进行解析，即宽度用于水平半径的解析，而高度用于垂直半径的解析。这意味着相同的百分比可能会计算出不一样的水平和垂直半径。所以，若是要建立一个自适应的椭圆，咱们能够把这两个半径值都设置为50%：
因为斜杠先后的两个值如今是一致的（即便它们最终可能会被计算为不一样的值），咱们能够把这行代码进一步简化为：
最终，只须要这一行代码，咱们就能够获得一个自适应的椭圆了。
扩展：border-radius 的简写方式
延伸一句代码半椭圆：border-radius: 100% 0 0 100%/50%;便可造成如图1.5所示的半椭圆
图1.5
延伸一句代码实现1/4椭圆：border-radius: 100% 0 0 0; 便可造成如图1.6所示的1/4椭圆
图1.6
小花絮：
为何叫 border-radius？可能有人会奇怪，border-radius 到底由何得名。这个属性并不须要边框来参与工做，彷佛把它叫做 corner-radius 更贴切一些。这个名字乍听起来确实让人摸不着头脑，其实缘由在于 border-radius 是对元素 borderbox 进行切圆角处理的。当元素没有边框时，可能还看不出差别；当它有边框时，则以边框外侧的拐角做为切圆角的基准。边框内侧的圆角会稍小一些（严格来讲内角半径将是 max(0,border-radius-border-width)）。