流体シェイプの解析(前編)

前書き

CSSのborder-radiusプロパティは、かなり柔軟に値を設定出来るようになっており、
1～8つの値を設定する事が出来ます。

以下、4つまたは8つの値でborder-radiusを設定する基本的な方法を書きます。

4つの値を設定する場合

border-radius: c1 c2 c3 c4;

ここでのcは角(コーナー)のcであり、1,2,3,4の数字はそれぞれ、
左上、右上、右下、左下と、左上から時計回りに値を設定します。

要素が長方形かつ、border-radiusの値をp%(0≧p≧100)として、
c1,c2,c3,c4の角を丸める範囲はそれぞれ、幅のp%、高さのp%となります。

例1： border-radius:30% 50% 40% 60%

8つの値を設定する場合

border-radius: x1 x2 x3 x4/y1 y2 y3 y4;

こちらの設定では水平方向(幅)と垂直方向(高さ)を個別に設定しています。
要素が長方形かつ、border-radiusの値をp%(0≧p≧100)として、
x1,x2,x3,x4の角を丸める範囲は、それぞれ幅のp%、y1,y2,y3,y4の角を丸める範囲は、
それぞれ高さのp%となります。

例2： border-radius:10% 90% 30% 70%/40% 20% 80% 60%;

ただし、xn,ynはそれぞれ一次元的な線分である為、
どちらも値が正の数である必要があります。

例1,例2の値を与えた結果

例1： border-radius: 30% 50% 40% 60%

例2： border-radius:10% 90% 30% 70%/40% 20% 80% 60%;

後編(8月11日公開)に続きます。