椭圆

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;
        }
四分之一的椭圆
上一篇下一篇

猜你喜欢

热点阅读