一个有用的可视化工具
9elements.github.io/fancy-borde…
哪天这个工具没了 你也至少应该自己会写
核心思想是把四个角想成是四个圆形的外边即可
我们知道在设置四条边框的css属性中往往是上右下左的顺序
但是设置border的顺序则不是，而是左上角，右上角，右下角，左下角这样的顺序
因此border-radius: 100px 50px;这个写法是对左上角和右下角为100px 右上角和左下角为50px
- 而border-radius: 100px/50px;是如下的简写
border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;
“/”的左边表示的其实是左上，右上，右下，左下四个角水平方向的半径，右边则垂直方向
原理图如下
