自适应的椭圆、半圆和四分之一圆

 2016-09-29 08:13

《CSS揭秘》书中在这章节中提到一个网站:simurai.com。它通过一些精妙的手法将border-radius发挥到了极致,其糖果按钮更是展示出了各种奇妙的形状。

糖果按钮

椭圆的形成

相信大家都用CSS做过正园,实现它的方法很简单:

background:#fb3;
width:200px;
height:200px;
border-radius:100px;/* >= 正方形边长的一半 */

正圆是通过border-radius设置了正方形长度的一半而得到的。为了得到数值方便,我们通常会把值设置成了百分比。但其实,如果我们这里设置了超过100px的半径,仍然可以得到正圆形,这是因为:

当任意两个相邻圆角的半径之和超过过border box的尺寸时,用户代理(浏览器开发商)必须按比例减小各个边框半径所使用的值,直到它们不会重复重叠为止。

——CSS背景与边框

现在我们要实现一个300px*200px的椭圆,就像这样:


它的确是用border-radius来完成的。因为border-radius有一个鲜为人知的真相:它可以单独指定水平和垂直半径,只要用一个斜杠(/)分隔两个值即可。这个特性允许我们在拐角处创建椭圆圆角:


那么我们制作这个园时,只要计算出对应的半径值就可以了:

border-radius:100px / 150px;

问题来了,我们现在是写死长宽尺寸,但如果尺寸发生变化会怎么办呢?这里我们说过,它可以接受百分比,那么自适应的椭圆代码就可以写成这样:

border-radius:50% / 50%;

巧合的是,斜杠前后两个值都是一样的,那我们就可以简化下:

border-radius:50%;

(#‵′)凸,这不就是正圆的代码吗?对的,这也是自适应椭圆的代码,只不过巧合罢了!

半椭圆

我们在学会了椭圆后,自然会接触到半椭圆形状,就像这样:


它是沿纵轴对称的,虽然我们还不知道如何去做,但至少知道需要给它的四个角设置不同的值。熟悉border-radius的朋友应该知道,它有四个扩展参数,分别是:

border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:

这四个参数的值是通过border-radius来简写的。如果我们写四个值,它们就会被分别从左上角开始以顺时针顺序应用到元素的各个拐角。如果少于四个值,它就和margin一样来做区分。我们也可以给四个不同角指定值,通过斜杠来分隔。注意的是,斜杠前后是分别单独展开的四个值:

border-radius:10px / 5px 20px;
/* 等同于 */
border-radius:10px 10px 10px 10px /5px 20px 5px 20px;
/* 展开是 */
border-top-left-radius:10px 5px;
border-top-right-radius:10px 20px;
border-bottom-right-radius:10px 5px;
border-bottom-left-radius:10xp 20px;

《CSS揭秘》书中是讲解了一堆,我还有有点糊涂了,于是我整理了下我自己的思路:

12.jpg

首先我们来写左上角的那个弧形,很多人总喜欢把一个图形的四分之一看作是这个图形的左上角,其实你可以不管这些。现在需要是左上角的水平半径和垂直半径,那么代码应该是这样的:

border-top-left-radius:50% 100%;

那么右上角的代码也随之出来了:

border-top-right-radius:50% 100%;

下面是平的,这怎么写?没事,有万能的0帮助你。那么我们代码按上面的反推下:

border-top-left-radius:50% 100%;
border-top-right-radius:50% 100%;
border-bottom-right-radius:0 0;
border-bottom-left-radius:0 0;
/* 等同于 */
border-radius:50% 50% 0 0 /100% 100% 0 0;
/* 约等同于 */
border-radius:50% /100% 100% 0 0;

嗯,这样我就能理解了,如果按书上说的,的确很头疼!


那么另外一种半圆形也可以按这个方法写出来了:

border-radius:100% 0 0 100%/50% 0 0 50%;
/* 简写下 */
border-radius:100% 0 0 100%/50%;

四分之一的椭圆

在创建了椭圆和半圆之后,我们很自然就会想到做一个四分之一圆的形状,就像这样:


border-radius:100% 0 0 0/100% 0 0 0;
/* 简写下 */
border-radius:100% 0 0 0;

你不会顺着往下想,是不是能用border-radius来做其他形状呢,比如八分之一,三分之一?很遗憾,你可能会失望了,这个还无法生成。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: