看《CSS 解密》的时候遇到 border-radius 不是很懂,有个例子如下:
1 | border-radius: 100% 100% 0 0 / 100% 0 0 0; /* 左上角椭圆半径是半宽高 */ |
差别挺大的对吧,原因就是角与角之间出现了挤兑(或者说重叠),如果遇到了重叠怎么办呢?怎么表现呢?原理是什么?
查官方文档,发现讲的很粗糙,但官方文档给出了一个specification(详细说明),这里面有一条Overlapping Curves,专门讲了这种情况怎么处理。
简单来说就是找最大的一处重叠,然后所有的半径都等比例缩小,比例是:重叠处的总长度/原本长度。
假如最大重叠处的长度是宽的两倍,那么所有半径都要缩小一半。
通过这件事,我再次感概,最有效,最可靠的信息来自于官方,还有就是一定要熟练英文,不然连答案在哪都找不到。
关于缩写
缩写 1(一个值):
这种最简单
1 | border-radius: 100%; |
缩写 2(两个值):
重复自身一遍
1 | border-radius: 100% 0; |
缩写 3(三个值):
把中间这个值重复一遍
1 | border-radius: 100% 50% 100%; |
跟 margin 和 padding 的缩写是一模一样的