cssborder-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%，⽽其他三个⾓都不能设圆⾓。因为四个⾓的⽔平和垂直半径⽅向上是相同的，所以不需要⽤斜杠语法了。border radius什么意思
所以
width: 150px;height: 100px;border-radius:0 0 100% 0;background: brown;
效果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。