css3の角丸・枠線の使い方まとめ

CSS3 が登場する前は、角丸の効果は画像またはマージン属性によって実現できました。従来の角丸生成ソリューションでは、背景パターンとして複数の画像が必要でした。 CSS3 の登場後は、複数の画像の作成に時間を無駄にする必要がなくなり、作業負荷が大幅に軽減され、Web ページのパフォーマンスが向上し、ページの読み込み速度が向上し、視覚的な信頼性が向上しました。 CSS3 の角丸には多くの利点があると説明しましたが、CSS3 の角丸と境界線の丸めの使用方法をまとめてみましょう。

まず、CSS3の角丸入門の章コースを学ぶことができます

CSS3の使用に関する知識をまとめました角と丸い境界線

1.

CSS3 角丸の紹介と応用スキル

適応楕円と角丸の構築、

CSS のみで円を構築する border-radius 属性を設定する必要があります値を辺の長さの半分にします。ここでは、border-radius のプロパティを包括的に紹介します。border-radius の展開式は、border-top-left-radius、border-bottom-right-radius、です。境界線-左下-半径。また、あまり知られていない機能もあります。border-radius は、2 つの値がスラッシュ ( / ) で区切られている限り、水平半径と垂直半径を個別に指定できます (角丸の水平半径と垂直半径が等しい)。と組み合わせることができます）。これらの特性を組み合わせると、border-radius:50%; の詳細な展開は border-radius:50% 50% 50% 50%/50% 50% 50% 50% となるはずです。

2. CSS3 の丸い境界線と境界線の画像効果の例の共有

学習ポイントは次のとおりです。 。 border-radius プロパティを使用すると、要素に丸い境界線を追加できます。 border-image プロパティは、画像の境界線を設定するために使用されます。 3.

CSS3の角丸とグラデーション関数のサンプルコードを共有します

線形グラデーション:背景:線形グラデーション(グラデーションの形式、最初の色の開始点、中間色の点の位置を設定します)終点の色); 線形: グラデーションのタイプ (線形グラデーション); グラデーションの形式: オプションのパラメーターを選択するには 2 つの方法があります - 1. 回転角度を設定します。0 度は左から右への水平方向を意味し、90 度は上からの方向を意味します。 0度から反時計回りに変化します。 4. CSS3の丸いボーダーの使用 - Ground Tornado

border-radiusの詳細な説明border-radius:50px

右上、左下、水平、垂直の距離は50pxです

border-radius:50%; ここでの % 記号は、適用された CSS スタイル要素の長さと幅の基準です

border-radius:50% 30%;は約 50%、水平、垂直は 30% です

border-radius:50% 30% 10%

上、水平、垂直は 50%、左右、水平、垂直は 30%、下、水平、垂直ですは 10% です

border-radius:10 % 50% 30% 10%;

上、水平、垂直は両方とも 10% です。右、横、縦ともに50%です。下、水平、垂直は 30% です。左、水平、垂直は両方とも 10% /前面は水平、背面は垂直

border-radius: 50% / 30%

上、左、下、右、水平は 50%、垂直は 30% です

border-radius:50% / 30% 10%;

上下左右、水平方向に 30%、上下左右に 10% ;

5.

CSS3 の角丸、影、透明 CSS3 で角丸を実装するには 2 つの方法があります

1 つ目は、従来の CSS では背景画像を 1 つしか持つことができませんでしたが、CSS3 では許可されます。 1 つの要素に複数の背景画像を追加します。これにより、1/4 円の背景画像を 4 つの角に配置して、角を丸くすることができます。

2 番目の方法は簡単で、CSS を使用せずに直接実装できます。 photos.

6.

CSS3 の角丸境界線の作成方法

Firefox と Safari は、境界線の下部の画像の色を表します。境界線の幅、実線、色は黒です。 border-top-left-radius: 55px 25px; 左上隅の境界線の丸みを表します。英語では、top, left となります。修正された角丸は、ピクセル値を制御することで実現されます。55px は水平方向の長さを表し、25px は垂直方向の長さを表します。同様に、右下隅の角丸効果の場合は、border-bottom-right-radius: 55px 25px; 、CSS3を使用して上から下に変更するだけで、境界線の角が丸い効果が得られます。

関連する質問と回答1. Css3 の丸い境界線の半径は鋭い角を作成します。

2.WeChatブラウザcss3角丸問題

3.css3角丸長方形問題

【関連推奨事項】

1.PHP中国語ウェブサイト無料ビデオチュートリアル:

CSS3最新ビデオチュートリアル

2. PHP中国語ウェブサイト無料チュートリアル: CSS3最新基本チュートリアル詳細説明

以上がcss3の角丸・枠線の使い方まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。