border-radius

Posted 2020-08-09 茗小铭

前段时间在研究过用CSS来实现画出一个箭头，效果如下：

实际上它是由下面两部分旋转一定角度后得到的。

我今天要讲的红色的这一部分，也就是箭头的尾巴。

1.水平半径和垂直半径

平时我们想要圆角的时候，直接设置的border-radius，像下面这样：

border-radius: 10px；

我们将border-radius: 300px还原成其整容前的模样，结果是：

border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;

好多个，有没有~虽然都是10px，但是它们表达的含义是不一样哒。

“/”前面是四个角按左右上下的顺序的水平圆角半径；

“/”后面的是同样顺序的垂直圆角半径；

那么到底什么是水平圆角半径和垂直圆角半径呢？

对于正圆，很少提到“水平半径”和“垂直半径”，因为，正圆的这两个半径都一样长。但是对于椭圆来说，就不一样啦，因为存在最长半径和最小半径。

在Web中，圆角的水平半径指的就是椭圆的水平半径，垂直半径就是垂直半径，上个图：

在箭头的尾巴部分，我设置了它的水平半径和垂直半径都是400px。

至于它的尾巴变细了是因为我的border-left为0；

下面，我分别把水平半径和垂直半径设置成了不同的值做了对比：

当水平和垂直都是400px时，看起来还是个正圆；

当水平半径>垂直半径时，看起来是个扁扁的椭圆；

当垂直半径>水平半径时，是一个长长的椭圆，不过因为这里只有四分之一，所以看起来不够明显。

以上就是水平半径和垂直半径啦。

2.大值特性

虽然我设置的圆角半径为400px，但实际上，它的圆角半径只有240px，也就是当初给div定义的宽度，这就是所谓的大值特性，当设置的圆角半径>元素的宽度时，圆角半径按照元素的宽度来算。

3.等比例特性

等比例特性，就是水平半径和垂直半径的比例是恒定不变的。

比如，元素的宽高分别为240px 480px，按照大值特性，水平半径为240px，垂直半径为480px，但是由于我使用的简写，也就是同事设置了水平半径和垂直半径都为400px，存在1:1的关系，所以图片显示出来的还是正圆~

4.单独指定某个角的圆角

eg: border-top-left-radius: 400px;

此外，还有另外一种写法：

border-top-left-radius: 400px 400px;

这样就也可以像border-radius的完整形态一样指定圆角的水平半径和垂直半径啦。

注：1）在分别指定一个角的圆角的水平半径和垂直半径时，中间只能用空格，“/”是不支持哒，并且应该先写水平，后写垂直。

2）这里的top和left不能弄反啦，否则是非法的。

5.当border透明时

eg: 设计的圆角半径是10px，但是我们在我们放了5px的透明的border的时候，半径应该设置为15px。

6.奇奇怪怪的图形

以下给大家看几个利用border-radius做出来的图形~有一种只有你想不到，没有做不到的赶脚。