css border-radius的用法及自适应的椭圆

我们知道border-radius允许您为元素添加圆角边框！

而border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

先看个例子。

如果将有个正方形元素设置一个border-radius值为边长的一半，则可以得到一个圆形。

width: 200px;height: 200px;border-radius: 100px;background: brown;

效果图：

 

这里宽高是固定的且相等，如果宽高不相等则显示为一个椭圆。

宽高不等效果图：

自适应椭圆

由于根据实际情况出发，我们希望它能根据实际的内容自动调整并适应。

 

解决方案：

一个鲜为人知的秘密，border-radius可以单独设置水平和垂直的半径，只需要用一个斜杠（/）分隔这二个值就行。此外我们还要知道border-radius不仅可以接受长度值还可以接受百分比值。

width: 150px;height: 100px;border-radius: 50%/50%;    //简写属性：border-radius:50%
background: brown;

只需这一行简单的代码就可以完成自适应的椭圆了。很神奇吧。

 

半椭圆

我们知道border-radius是个简写属性，它得展开式：

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-botom-left-radius

这四个字如上的顺序，从左上角开始顺时针应用到元素其他三个角上。

但是真正简介的写法还是使用border-radius这个简写属性，只需对应上面的规则，用空格分开多个值，也能达到展开式的效果。

如果只提供了三个值：1 2 3 则第4个值和第2个值相同。如果只提供了二个值：1 2 则1 3相同，2 4值相同。

我们甚至可以为四个角设置不同的水平和垂直半径，方法就是在斜杠前指定一到四个值，斜杠后指定一到四个值。

    width: 150px;height: 100px;border-radius:  50%/0 0 100% 100%;background: brown;

变换一下：

    width: 150px;height: 100px;border-radius:  50%/100% 100% 0 0;background: brown;

来一个小红帽：

    width: 150px;height: 100px;border-radius:  50%/50% 50% 0 0;background: brown;

 

    width: 150px;height: 100px;border-radius:   100% 0  0 100%/ 50%;background: brown;//沿着纵轴切开的椭圆

同理，可以得出：

    width: 150px;height: 100px;border-radius: 0  100% 100% 0/ 50%;background: brown;

 

 

四分之一的椭圆

那么，有办法得到四分之一椭圆呢？我们从效果图看出，创建一个四分之一的椭圆，只要一个角的水平和垂直半径值都需要是100%，

而其他三个角都不能设圆角。因为四个角的水平和垂直半径方向上是相同的，所以不需要用斜杠语法了。

所以

 

    width: 150px;height: 100px;border-radius:0 0 100% 0;background: brown;

效果如下：