椭圆
2017-07-26 本文已影响0人
_菡曳_
自适应的椭圆
我们希望使用border-radius来达到这样一个效果:如果元素宽高相等则显示为圆;否则,显示为椭圆。
说到border-radius,有一个鲜为人知的真相:它可以单独指定水平和垂直半径,只要用一个斜杠(/)分割这两个值即可。这个特性允许我们在拐角处创建椭圆圆角,因此,如果我们有一个尺寸为200px*150px的元素,就可以把它圆角的两个半径值指定为元素宽高的一半,从而得到一个精确的椭圆。
.shape{
background: pink;
width: 200px;
height: 300px;
/*border-radius:100px / 75px;*/
border-radius: 50%;
}
一个自适应的椭圆
半椭圆
border-radius不仅可以单独指定水平和垂直半径,还可以为每个角分别指定不同的值,用空格隔开(从左上顺时针指定)
.shape2{
background: pink;
width: 200px;
height: 150px;
border-radius: 0 100% 100% 0 / 50%;
}
半椭圆
四分之一的椭圆
.shape3{
background: pink;
width: 200px;
height: 150px;
border-radius: 100% 0 0 0;
}
四分之一的椭圆