この記事ではCSSボーダーの使い方を説明します

境界線のスタイル

border-style プロパティは、表示する境界線の種類を指定します。

border-style属性は境界線のスタイルを定義するために使用されます

境界線スタイルの値コードのデモンストレーション:

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>Shuixiang Muyu のブログ</title>

    <スタイル>
        p.なし{
            境界線スタイル: なし;
        }

        p.dotted {
            境界線スタイル: 点線;
        }

        p.破線{
            境界線スタイル: 破線;
        }

        p.ソリッド{
            境界線のスタイル: solid;
        }

        p.double {
            境界線スタイル: double;
        }

        p.溝{
            境界線スタイル: 溝;
        }

        p.リッジ{
            境界線スタイル: ridge;
        }

        p.インセット{
            境界線スタイル: インセット;
        }

        p.outset {
            境界線スタイル: outset;
        }

        p.隠し{
            境界線スタイル: 非表示;
        }
    </スタイル>


</head>

<本文>

    <div>
        <p class="none">境界線はありません。 </p>
        <p class="dotted">点線の境界線。 </p>
        <p class="dashed">破線の境界線。 </p>
        <p class="solid">実線の境界線。 </p>
        <p class="double">二重の境界線。 </p>
        <p class="groove"> 溝の境界線。 </p>
        <p class="ridge">尾根の境界。 </p>
        <p class="inset">インセット境界線。 </p>
        <p class="outset">アウトセットの境界線。 </p>
        <p class="hidden">境界線を非表示にします。 </p>
    </div>
</本文>

</html>

効果のデモンストレーション:

境界線の幅

border-widthプロパティを使用して境界線の幅を指定できます。

境界線の幅を指定するには、2px や 0.1em などの長さの値 (単位は px、pt、cm、em など) を指定する方法と、thick、medium (デフォルト)、thin の 3 つのキーワードのいずれかを使用する方法の 2 つがあります。

注: CSS では 3 つのキーワードの特定の幅は定義されていないため、あるユーザーは thick、medium、thin をそれぞれ 5px、3px、2px に設定し、別のユーザーはそれぞれ 3px、2px、1px に設定する場合があります。

 p.1 {
        境界線スタイル:solid;
        境界線の幅:5px;
    }
    p.2 {
        境界線スタイル:solid;
        境界線の幅:中;
    }

境界線の色

border-color プロパティは境界線の色を設定するために使用されます。設定できる色は次のとおりです。

name - 「赤」などの色の名前を指定します
RGB - 「rgb(255,0,0)」などのRGB値を指定します。
16 進数 - 「#ff0000」などの 16 進数値を指定します。

境界線の色を「透明」に設定することもできます。

注意: border-color だけでは機能しません。まず border-style を使用して境界スタイルを設定する必要があります。

  p.1{
        境界線スタイル:solid;
        境界線の色:赤;
    }
    p.2 {
        境界線スタイル:solid;
        境界線の色:#98bf21;
    }

境界線 - 各辺を個別に設定する

CSS では、異なる側に異なる境界線を指定できます。

ｐ {
        ボーダー上部のスタイル:点線;
        右境界線スタイル:solid;
        境界線下部のスタイル:点線;
        左境界線スタイル:solid;
    }

上記の例では、単一のプロパティを設定することもできます。

例

境界線スタイル:点線実線;

border-style プロパティには 1 ～ 4 個の値を指定できます。

border-style:dotted solid double dashed;

上の境界線は点線です
右の境界線は実線です
下の枠線は二重になっている
左の境界線は破線です

境界線スタイル:点線実線ダブル;

上の境界線は点線です
左右の境界線は実線です
下の枠線は二重になっている

境界線スタイル:点線実線;

上下の境界線は点線です
右と左の境界線は実線です

境界線スタイル:点線;

四辺の境界線は点線です

上記の例では border-style を使用しています。ただし、border-width および border-color と一緒に使用することもできます。

境界線 - ショートカットプロパティ上記の例では、境界線を設定するためにいくつかのプロパティを使用しています。

プロパティで境界線を設定することもできます。

「border」プロパティで設定できます。

境界線の幅
境界線スタイル (必須)
境界線の色

    border:5px 赤一色;

CSS ボーダーの使い方を解説したこの記事はこれで終わりです。CSS ボーダーに関するその他のコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: 美容・スタイリングウェブサイト向けのカラーマッチングテクニックと効果表示

>>: MySQLはこのような更新文を決して書きません

この記事ではCSSボーダーの使い方を説明します

境界線のスタイル

境界線の幅

境界線の色

Vue3 AST パーサー - ソースコード分析

flexとは何か、flexレイアウト構文の詳細なチュートリアル

Linux システムでの Selenium クローラープログラムの導入の概要

Vue でコミュニケーションを実装する 8 つの方法

Mysql が CPU を過剰に占有する場合の最適化方法 (必読)

CSS 属性値正規マッチングセレクターの使い方 (ヒント)

Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

MySQL 5.7.23 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)

ウェブサイトのフロントエンドパフォーマンスの最適化: JavaScript と CSS

MySQLスケーラブル設計の基本原則

推薦する

MySQL 5.x 以降を使用している場合のエラー #1929 列 ''createtime'' の日付時刻値が正しくありません: '''' の簡単な解決方法

スライダー間隔コンポーネントのネイティブ js 実装

Dockerリポジトリの一般的なコマンドの詳細な説明

HTMLを教える記事

Linux 環境変数とプロセスアドレス空間の概要

Linux で静的ルーティングを追加するための 2 つの実装方法の分析

Vue3 ページ、メニュー、ルートの使用

MySQL 8.0.23 のインストールと設定方法のグラフィックチュートリアル (Win10 の場合)

mysqlタイムスタンプの使用

ElementUIはドロップダウンオプションと複数選択ボックスのサンプルコードを実装します

CSS3 の Flex レイアウトの詳細な分析

ログインフォームを実装するためのReactサンプルコード

CSSは解析プロセスでさまざまな読み込み効果を実装します

Vueはカウンターのシンプルな生成を実装します

MySQLでユーザーを作成し、ユーザーに権限を付与する方法の詳細なチュートリアル