Question

详解border-radius属性？

看到描述都是比较模糊不清的，八个参数根本不知道斜杠前和斜杠后的两组

Answer 1

其实通过一张示意图来理解的话就很容易了，那么我先来画一张示意图。

by三人行慕课

我们可以理解成是在角的位置放了一个圆形，而我们设置的参数就是圆形的半径，/前和/后分别是水品半径和垂直半径（横向的半径和纵向的半径）。

设置参数的顺序分别是左上、右上、右下、左下，在这里简称为1、2、3、4

我们设置这样的参数 50px 50px 50px 50px/25px 25px 25px 25px;（相当于50px/25px）

也就是1 2 3 4的水平半径都是50像素，垂直半径都是25像素，就会得到这样的图形：

by三人行慕课

我们来分析一下就是

by三人行慕课

这样看起来就显而易见，横向半径是50px，纵向半径是25px。