ホームページ > 記事 > ウェブフロントエンド > CSS3 角丸_html/css_WEB-ITnose
CSS3 角丸_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:02981ブラウズ
CSS3 の丸い border-radius もよく使われます。角が丸いので、たくさんの写真を保存できます :)
構文:
border-radius: none d82af2074b26fcfe177e947839b5d381 {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 ドラえもんを覚えていますか?角を丸くして描きました。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。