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