CSS3 角丸_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS3 角丸_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:51:02

オリジナル

1005 人が閲覧しました

CSS3 の丸い border-radius もよく使われます。角が丸いので、たくさんの写真を保存できます :)

構文:

border-radius: none {1,4} [/ <長さ>{1,4} ]?

注: 長さに負の値を指定することはできません。 border-radius は省略されたメソッドです。「/」の前後の値が両方存在する場合、「/」の前の値が水平方向の半径を設定し、「/」の後の値が垂直方向の半径を設定します。「/」がなければ、水平半径と垂直半径は等しくなります。また、その4つの値は左上、右上、右下、左下の順に設定されます。

簡単な例:

<!DOCTYPE html><html><head><style> #radius{text-align:center;border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:350px;height:200px;border-radius:25px;-moz-border-radius:25px; }</style></head><body><div id="radius">Border-Radius</div></body></html>

ログイン後にコピー

写真:

2 つの値を設定する場合、反対側の角の値は同じで、左上と右下が最初の値をとり、他の 2 つは同じになります。角は他の値を取ります。

<!DOCTYPE html><html><head><style> #radius{text-align:center;border:2px solid #a1a1a1;padding:10px 40px; background:#dddddd;width:350px;height:200px;border-radius:25px 50px;-moz-border-radius:25px 50px; }</style></head><body><div id="radius">Border-Radius</div></body></html>

ログイン後にコピー

効果:

さらに、各コーナーの水平半径と垂直半径を個別に設定できます:

border-radius:15px 30px / 20px 10px;

ログイン後にコピー

同等:

border-top-left-radius:15px 20px；border-bottom-right-radius:15px 20px;border-top-right-radius:30px 10px;border-bottom-left-radius: 30px 10px;

ログイン後にコピー

効果:

さらに、フィレット半径境界線の厚さが境界線の厚さ以下の場合、内側のフィレットは正方形になります。これもわかりやすいです。例:

border:20px solid #a1a1a1;border-radius:20px;

ログイン後にコピー

効果:

フィレットの半径が境界線の厚さよりも大きい場合、境界線の内側にも丸い角の効果が生じます:

border:10px solid #a1a1a1;border-radius:20px;

ログイン後にコピー

効果:

丸い角を使用して円を描くことができます:

<!DOCTYPE html><html><head><style> #radius{text-align:center;margin:50px auto;width:0;height:0;border:100px solid #a1a1a1;border-radius:100px;}</style></head><body><div id="radius"></div></body></html>

ログイン後にコピー

効果:

CSS3 ドラえもんを覚えていますか?角を丸くして描きました。