CSS3の角丸ボーダーの作り方_html/css_WEB-ITnose

他の人のウェブサイトで、テキスト領域を囲む枠線が付いているのをよく見かけます。これは、テキストを囲む角丸四角形に似ています。非常に印象的だったので、写真の枠線を使用して装飾しようとしました。 Web ページの読み込み速度が遅くなります。CSS3 を使用して境界線を丸くする効果を実現できますか?もちろん、border-radius は Firefox または Safari と Chrome でのみ実装できます

W3C は長い間、CSS の角丸を実装する CSS3 属性を定式化してきました: border-radius、Firefox および Safari もプライベート属性を通じてこの機能を実装します:

1

<div style= " border-top-left-radius: 55px 25px; border-bottom-left-radius: 55px 25px; border-top-right-radius: 55px 25px; border -bottom-right-radius: 55px 25px; border: 1px Solid #000; padding: 10px;" >Firefox と Safari は角丸を実装します</div>

Firefox と Safari はプライベート プロパティを使用します丸い角の効果

これは境界線の下部の画像の色を表します。
border: 1px ソリッド #000; 境界線の幅を表し、色は黒です。 55px 25px; 左上を表します 角の境界線の丸みの効果は、英語では「top, left」で識別できます。55px は水平方向の長さを表し、25px は垂直方向の長さを表します。
同様に、border-bottom-right -radius: 55px 25px; 右下隅の角丸効果については、上から下に変更するだけです
境界線の角丸効果を実現するには、-moz-border を使用します。 -radius は、角を丸めるための Firefox のプライベート プロパティです。 - webkit-border-radius は、角を丸める特定の角を指定するだけでよい場合に、Webkit コア ブラウザ (Safari や Chrome など) によって使用されるプライベート プロパティです。 、それらはすべてそれぞれ 4 つのプロパティを定義します:

-moz-border-radius-topleft / -webkit-border-top-left-radius-moz-border-radius-topright / -webkit-border-top-right-radius-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius-moz-border-radius-bottomright / -webkit-border-bottom-right-radius