此时我们每个角不在是四分之一圆了，前面我们也说过，只有水平和垂直半径值相同时，他们才具有四分之一圆特性，这样一来，我们可以改变不同的半径值，制作一些特殊的图形效果，感兴趣的朋友可以自己在本地尝试一下各种不同的设置方式。
二、border-radius: 水平1 水平2 / 垂直1 垂直2：设置了两个水平值和两个垂直值，此时我们top-left和bottom-right具有相同的水平和垂直半径，也就是其中的水平1和垂直1；而top-right和bottom-left也具有相同的水平和垂直半径值，也就是水平2和垂直2，我们他拆分出来就是：
复制代码
border-top-left-radius: 水平1 垂直1；
border-bottom-right-radius: 水平1 垂直1；
border-top-right-radius: 水平2 垂直2；
border-bottom-left-radius: 水平2 垂直2;
具体我们来看下面的实例：
复制代码
.demo {
border-radius: 10px 20px / 20px 10px;
}
等价于：
.demo {
border-top-left-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;
border-top-right-radius: 20px 10px;
border-bottom-left-radius: 20px 10px;
}
效果：
上面两种都是相互对应的取值，我们来看一个实例，水平有三个取值，而 垂直只有两个取值
复制代码
.demo {
border-radius: 10px 20px 30px / 50px 60px;
}
等价于：
.demo {
border-top-left-radius: 10px 50px;
border-top-right-radius: 20px 60px;
border-bottom-left-radius: 20px 60px;
border-bottom-right-radius: 30px 50px;
}
效果：
我们从上面等价代码中可以知道，不管他们怎么取值，“/”前后各自按TRBL顺序取值。
上面几种都是我们常见的一些应用，那下面我们来看几种特殊点的应用：
一、对于border-radius还有一个内半径和外半径的区别，它主要是元素 边框值较大时，效果就很明显，当我们border-radius半径值小于或等于border的厚度时，我们边框内部就不具有圆角效果,例如下面的实例
复制代码
.border-big {
border: 15px solid green;
border-radius: 15px;
}
效果：
我们接着上面这个例子，把 border-radius半径值改成比边框值大一点：
复制代码
.border-small {
border: 15px solid green;
border-radius: 25px;
}
效果：
为何当border-radius的半径小于元素边框的厚度时，内部没有圆角效果？我在这里说一下，因为我们的border-radius的内径值是等于外径值减去边框厚度值，当他们的值为负时，内径默认为0,最前面讲border-radius取值时就说过其值不能为负值。同时也说明border-radius的内外曲线的圆心并不一定是一致的。只有当边框厚度为0时，我们内外曲线的圆心才会在同一位置。
