9、自适应的椭圆

border-radius属性可以单独指定圆角的水平和垂直半径,用斜杠分隔两个值(/),并且可以使用百分比,这个百分比会基于元素的尺寸,其本身实际上是一个简写属性,展开式为4个角的值。

半椭圆

border-radius: 50% 50% 0 0 / 100% 100% 0 0;
9、自适应的椭圆_第1张图片

四分之一圆

border-radius: 100% 0 0 0;

9、自适应的椭圆_第2张图片

使用这种技巧可以生成很多有趣的按钮 http://simurai.com/archive/buttons/

你可能感兴趣的:(9、自适应的椭圆)