CSS で丸い境界線と円形の効果を実現するにはどうすればよいですか? (写真 + ビデオチュートリアル)-CSSの知識-php.cn

CSS で丸い境界線と円形の効果を実現するにはどうすればよいですか? (写真 + ビデオチュートリアル)

藏色散人

リリース： 2018-09-13 16:41:37

オリジナル

13123 人が閲覧しました

CSS の丸い境界線の効果は、通常、フロントエンド Web デザインのナビゲーションバーやプロンプトボックスで使用されます。 CSS を使用して丸い境界線や丸い画像を設定すると、Web ページ全体がより豊かに見える効果があります。

この記事では、CSSを使用して丸い枠線効果を設定する方法を紹介します。以下では、具体的なコード例を通して関連知識を詳しく説明します。

CSSの丸枠コード例は次のとおりです:

例1: CSSの片面丸枠効果

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>css圆角边框代码示例</title>
   <style type="text/css">
      div{
         width: 200px;
         height: 200px;
         background: #A6E22B;
         margin: 20px auto;
         /*实现单边圆角*/
         border-top-left-radius:20px;
            border-top-right-radius:20px;
            border-bottom-left-radius:20px;
            border-bottom-right-radius:20px;
      }
   </style>
</head>
<body>
<div></div>
</body>
</html>

ログイン後にコピー

上記のコードでは、辺の長さが200の正方形を作成しました。 CSS スタイルの border-top-left-radius 20px を追加するだけで、この div の左上の丸い角の効果が実現されます。以下に示すように:

CSS で丸い境界線と円形の効果を実現するにはどうすればよいですか? (写真 + ビデオチュートリアル)

CSS スタイルの border-top-right-radius 20px を追加し続けると、上部に丸い角を追加するだけの効果が得られます。以下に示すように:

CSS で丸い境界線と円形の効果を実現するにはどうすればよいですか? (写真 + ビデオチュートリアル)

次に、引き続き 2 つの CSS スタイル、border-bottom-left-radius と border-bottom-right-radius を追加します。つまり、ブラウザーでの上記のコードの最終的な効果は次のようになります。以下に続きます:

CSS で丸い境界線と円形の効果を実現するにはどうすればよいですか? (写真 + ビデオチュートリアル)

さて、上記の一連の説明を通じて、CSS の角丸境界線に関する重要な知識点を発見できたでしょうか?それが border-radius プロパティ です!このプロパティは、4 つの border-*-radius プロパティを設定するための短縮プロパティです。この属性は要素に丸い境界線を追加するために使用されます。

例 2: CSS の円形境界線効果

 /*同时实现四个边圆角*/
 border-radius: 100px;

ログイン後にコピー

例 1 の HTML コードに基づいて、一辺の長さが 200 ピクセルの正方形の div ブロックに CSS border-radius スタイル属性を追加するだけで、値を次のように設定します。 100px 半径を 100px に設定します。レンダリング効果は次の図のようになります。

CSS で丸い境界線と円形の効果を実現するにはどうすればよいですか? (写真 + ビデオチュートリアル)

この記事は、CSS での丸い境界線の設定について詳しく説明したものです。必要な友達に役立つことを願っています。 HTML/CSS の知識について詳しくは、PHP 中国語 Web サイトのHTML ビデオチュートリアルおよび CSS ビデオチュートリアル

をご覧ください。

以上がCSS で丸い境界線と円形の効果を実現するにはどうすればよいですか? (写真 + ビデオチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。