前端知识| CSS小技巧——自适应椭圆

border-radius 属性的基本用法。

你可能注意到过,给任何正方形元素设置一个足够大的圆角边框、就可以把它变成一个圆形。所用到CSS的代码如下所示:,,,


前端知识| CSS小技巧——自适应椭圆

前端知识| CSS小技巧——自适应椭圆”> <br/> </p> <p> </p> <p>你可能还注意到了,如果指定任何大于100 px的半径,仍然可以得到一个圆形。规范特别指出了这其中的原因:</p> <p>

不过,我们往往不愿意对一个元素指定固定的宽度和高度,因为我们希望它能根据其内容自动调整并适应,而内容的长短不可能在事先就知道。即使是在设计一个静态网站的时候(元素的内容可以预先确定),我们也可能需要在某个时刻改变其内容,或者我们为它准备了一款尺寸略有差异的回退字体,而不同字体对相同内容的渲染结果很可能是不同的。在这个案例中,我们通常期望达到这个效果:如果它的宽高相等,就显示为一个圆,如果宽高不等,就显示为一个椭圆。可是,我们前面的代码并不能满足这个期望。当宽度大于高度时,我们得到的形状如1.2图所示。那我们到底能不能用border - radius来产生一个椭圆,甚至是一个自适应的椭圆呢?


前端知识| CSS小技巧——自适应椭圆”> <br/> </p> <p> </p> <p> </p> <p>说到圆角边框、有一个鲜为人知的真相:它可以单独指定水平和垂直半径,只要用一个斜杠(/)分隔这两个值即可。这个特性允许我们在拐角处创建椭圆圆角(参见图1.3),因此,如果我们有一个尺寸为200 px×150 px的元素,就可以把它圆角的两个半径值分别指定为元素宽高的一半,从而得到一个精确的椭圆:</p> <p> <br/> </p> <p> <img src=

前端知识| CSS小技巧——自适应椭圆

前端知识| CSS小技巧——自适应椭圆”> <br/> </p> <p> </p> <p>我们可以在图1.4中看到结果。但是,这段代码存在一个很大的缺陷:只要元素的尺寸发生变化,这个特性的值就得跟着改。我们在图3 - 5中可以看的到,当元素的尺寸变为200 px×300 px时,如果border - radius没有跟着改变,会发生什么后果。因此,如果我们的元素尺寸会随着它的内容变化而变化,这就是一个问题了。难道我们真的走投无路了吗?其实,border - radius这个属性还有另外一个鲜为人知的真相,它不仅可以接受长度值,还可以接受百分比值。这个百分比值会基于元素的尺寸进行解析,即宽度用于水平半径的解析,而高度用于垂直半径的解析。这意味着相同的百分比可能会计算出不同的水平和垂直半径。因此,如果要创建一个自适应的椭圆,我们可以把这两个半径值都设置为50%:</p> <p> <br/> </p> <p> <img src=前端知识| CSS小技巧——自适应椭圆