css之border-radius

转载自---------》张鑫旭

 

border-radius私有前缀拜拜

还有个把月就2016年了，00后都已经登上历史舞台了，大家都懂我说的意思，浏览器个把年前就把私有前缀给去掉了，现在完全没必要还傻傻使用-webkit-border-radius, -moz-border-radius，至少我是早就不使用了，你随意~

 

 

由于我们平时使用border-radius绝大多数情况是都单值，例如border-radius: 300px，于是，久而久之可那会忽略这样一个事实，那就是border-radius单值实际上是一种简写

border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;

斜杠前的是水平方向，斜杠后面的是垂直方向

对于正圆，我们基本上很少提“水平半径”和“垂直半径”，因为，半径都是一样长。但是，对于标准椭圆，那就不一样了，因为存在最长半径和最小半径。在web中，圆角的水平半径指的就是椭圆的水平半径，垂直半径就是椭圆下图所示的垂直半径：

通过设置水平方向和垂直方向的值加深理解

这是该文章作者提供的工具，看不太明白的可以用一下，加深理解