CSS3 の丸い境界線の使用 - Escape Tornado

0. クイックスタート

border-radius:50px;

1.border-radiusの詳しい説明

border-radius:50px;

右上、左下、水平および垂直の距離は50ピクセルです

境界半径:50%;

ここの%記号は、適用されたCSSスタイル要素の基本の長さと幅です

境界半径:50% 30% ;

上下、水平、垂直は約50%、水平、垂直は30%

境界半径:50% 30% 10%;

上、水平、垂直は 50%、左右、水平、垂直は 30%、下、水平、垂直は 10%です

境界半径:10% 50% 30% 10%;

上部では、水平方向と垂直方向の両方が 10% です。右、横、縦ともに50%です。下、水平、垂直は 30% です。左、横、縦すべて10%

/前面は水平、背面は垂直です

境界半径:50% / 30% ;

上下左右、水平は50%、垂直は30%

境界半径:50% / 30% 10%;

上下左右、水平は 50%、上下垂直 30%、左右垂直 10%;

残りのルールは使用前/使用前の例に示されているため、一つずつ説明しません

2.個別設定

border-top-left-radius:10%;

border-top-left-radius:10% 30%;

下は上に対応し、右は左に対応します