Web ページを作成する過程で、角を丸くする効果を実現する必要がある場合があります。以前の方法では、デザイン ドラフトをページに簡単に作成できる画像に切り取り、複数の背景画像を使用して角を丸くすることでした。 CSS3 の登場以降、CSS3 では、以下に示すように、要素の角丸効果を設定するための一連のプロパティが提供されます。
上記の関数のオプションの値を次の表に示します。
border-radius は、丸い境界線を実装するために使用されます。
例：
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:20px;}</style></head><body><div></div></本文></html>実行結果:
ただし、border-radiusを150pxに設定すると、円形の境界線になります。
<html><head><style>div{width:300px;height:300px;border:1pxsolidred;border-radius:150px;}</style></head><body><div></div></本文></html>実行結果:
便宜上、border-radius を 50% に設定するだけです。効果も同様です。
ただし、円を描きたい場合は、幅と高さが等しくなければなりません。
実際、上記のような属性値の場合、4 つの属性値が明らかに 4 つの角を基準にしている場合、複数の属性値を接続できます。相対法とは何ですか？左上隅から始めて時計回りに進みます。
例：
<html><head><style>div{幅:300px;高さ:300px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:50px0px20px100px;}</style></head><body><div ></div></body></html>実行結果:
たとえば、卵を描いてみましょう。
<html><head><style>div{width:80px;height:100px;border:1pxsolidblack;background:rgb(0,162,255);border-radius:40px40px40px40px/60px60px40px40px;}</style></head><body> <div></div></body></html>実行結果:
