CSS3 を使用して角丸効果を実現する方法 (コード例付き)

ページ全体のスタイルに合わせるために、統一されたスタイルを実現するために正方形の div を別の形状に変換する必要がある場合があります。この記事では、css3 を使用して角を丸くする効果を実現する方法を説明します。特定の参考値がありますので、困っている友人が参考にしていただければ幸いです。

css3 を使用して角丸を実現する利点

1. Web サイトのメンテナンスの負荷を軽減します。

2. Web サイトのパフォーマンスが向上し、画像の HTTP リクエストがなくなると、Web ページの読み込み速度が速くなります。

3. 視覚的な美しさを高めます。

css3 を使用して角丸効果を実現する原則

border-radius 属性を使用する必要がありますcss3 では、今日は border-radius 属性について詳しく学習します。

Border-radius 属性

1. ##意味: border-radius 属性の略語は、要素に丸い境界線を追加します。

2. 構文: border-radius: 1-4 length|% / 1-4 length|%;

3. ブラウザの互換性: IE9、Firefox 4、Chrome、Safari 5および Opera は、border-radius 属性をサポートします。

css3 を使用して角丸効果を実現するコード

例 1: 背景を指定した円要素color Corner

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

効果の例は図に示すとおりです

##例 2: 角が丸い特定の要素を指定します

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}

効果の例は図に示すとおりです

＃＃＃＃＃＃＃ ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃まとめ＃＃＃＃＃＃＃＃＃＃ ##属性 2 つの長さの最初の値は水平方向の半径で、2 番目の値は垂直方向の半径です。 2 番目の値を省略した場合は、最初の値からコピーされます。どちらかの長さがゼロの場合、角は丸くなく正方形になります。 border-radius プロパティでは楕円も作成できます。これについては後の記事で紹介します。

以上がCSS3 を使用して角丸効果を実現する方法 (コード例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。