border-radius
前段时间在研究过用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做出来的图形~有一种只有你想不到,没有做不到的赶脚。