CSS——椭圆

前言

之前的碰到的椭圆的小问题总结下

椭圆原理

[图片上传失败...(image-e1890-1606228545362)]

border-radius ：
允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。其中的椭圆的水平半径相对于盒模型的宽，垂直半径相对于盒模型的高。

• 图一是无设置border-radius的情况，为直角
• 图二是使用一个半径时，即水平半径和垂直半径一样，所呈现的圆
• 图三是使用2个半径时，所呈现出一个椭圆

圆或者椭圆都是通过设置border-radius4个边角弧度，使其各自显示1/4的圆或椭圆，4个再组合起来形成一个完成的圆或者椭圆。

椭圆的语法：

border-radius: 1em/5em;

/* 等价于： */

border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* 等价于： */

border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

参考:

MDN——border-radius