border-radius四个值的问题

我们都知道border-radius后面如果是4个值的话，依次代表的是左上角、右上角、右下角、左下角。

但是这样写呢：border-radius:10px 20px 30px 40px/50px 40px 30px 20px;我就不知道是什么意思了，原来border-radius:10px/20px；是说圆的水平半径是10px，垂直半径是20px，这样子写出来的边框就不是一个圆形的了

那我们来画个椭圆吧

先来一个四边都是正圆形的：

每次我们设置border-radius:50%;用这个图的理论就是四角圆的半径是父级宽度的一半也就是100px，你就想象一下效果就是一个正圆。

再来一个四个角的圆是椭圆的效果：

这里我们写的是border-radius:25px 0 0 0/50px 0 0 0;代码敲出来效果如下：

这里需要注意哦，25培px是圆水平的半径，50px是圆垂直的半径。

转载于:https://www.cnblogs.com/learnings/p/5897764.html