CSS での境界線属性の使用の概要

CSS を初めて使用する友人は、border 属性が単なる境界線の描画であると考えるかもしれません。実際、border はオブジェクトの境界線の幅、色、破線、実線、その他のスタイルを制御します。単一の境界線またはすべての境界線を制御できます。境界線属性を使用すると、さらに多くの効果を作成できます。 CSS では、ボーダー構文を使用して、ボーダーの幅、スタイル、色などを設定するなど、ボーダーにさまざまなデザイン変更を加えることができます。また、原則として、CSS はボーダーに限定されません。 p ブロックまたはスパンの境界線は、Web ページのタイトルの境界線、画像の境界線 (img 境界線) など、他の Web ページ要素の境界線にも適用できます。すべての主要なブラウザーがサポートしています。 CSS の境界線属性。以下にborder属性の使い方を詳しく説明します。

まず、PHP 中国語 Web サイトに関連する無料コースを学習します

1. 「HTML/CSS クイック スタート」

2 で

CSS ボーダー スタイル

コースを学習します。极CSSとCSS3の学校のビデオチュートリアルCSSボックスモデル）border-width：パーセンテージをサポートしません、キーワードをサポートします、細（1px）、中（デフォルト値、3px、デフォルト値が3pxである理由） border-style はボーダーが 3px 以上の場合にのみ有効です

2) border-style: 異なる値があります

a.solid:三角形と台形を実現できます。 b.dashed: 点線、Chrome/Firefox で参照 ブラウザでは点線と実線の比率は 3:1 (細)、IE ブラウザでは比率は 2:1 (密);

c.dotted: 点線、Chrome/Firefox ブラウザーでは正方形のドット、IE ブラウザーでは丸いドットです (丸い角を実現するには丸いドットを使用できます)。線、計算ルール、二重線の幅は常に等しく、二重線の間隔は±1、たとえば 3px =1 (内側) + 1 (中間間隔) + 1 (外側) の 3 つを実現できます。 -bar パターン;

e.inset (内側の凹面)、outset (外側の凸面)、ridge (溝): 古いスタイル、互換性が低い、使用シナリオがありません

2 のボーダー属性の詳細な説明。 css スタイル

border-width 属性は境界線の幅を設定します

可能な値: ピクセル

border-style 属性は境界線のスタイルを設定します

可能な値: 実線 (直線)、破線 (破線)、点線(点線)

border-color 属性は境界線の色を設定します 可能な値: red、#f00、#ff0000、rgb(255,0,0)、transparent

border-left 属性は左の境界線を設定します

border-right 属性右の境界線を設定します

border-top プロパティは上の境界線を設定します

border-bottom プロパティは下の境界線を設定します

3. 知らない境界線の使い方

アイデア: 下端が平行な場合水平線の幅と高さを直接制御します。水平線と一致しない場合に希望する三角形の効果を実現するには、アスペクト比を使用し、CSS3 で変換属性を組み合わせて回転する必要があります。三角形を希望どおりに表示する効果 (ここではアイデアの紹介にすぎず、具体的な実装ではありません。数学的な知識があれば、Baidu で自分で作成できます)。

4. CSSのborder属性を使って変形したボーダーを作成する方法のまとめ

borderとは、名前のとおりボーダーを意味し、CSSではボーダー構文を使用してさまざまなデザイン変更を行うことができます。ボーダーのデザインなど ボーダーの幅、スタイル、色などを設定したり、ボーダーを非表示にしたりすることができます。原則として、CSS ボーダーのデザインはブロックやスパンのボーダーに限定されず、非表示にすることもできます。 Web ページのタイトル、画像の境界線 (img border) など、他の Web ページ要素の境界線に適用できます。すべての主要なブラウザーは CSS border プロパティをサポートしています。

5. 境界線の三角形の影と複数の境界線の配置と解釈

境界線は、上下左右の方向に応じて個別に設定できます。 right;

したがって、属性は個別に設定することもできます。

単一の属性を組み合わせて記述することもできます。 、右、下、左;

border-width: 上、左、右、下;

border-width: 4 方向;

border-style | border-color は次のように設定することもできます

6.

CSS: Border 属性

知識を広げましょう

これまでに多くのデザイナーがこの章に記載されている知識を活用してきました。さらに拡張できる方法を紹介します。

複数のエッジ 要素に複数のエッジを適用する場合、参照できるさまざまなテクニックがあります。

ボーダースタイル実線、破線、点線は最も一般的に使用されるボーダースタイルの属性値であり、溝や尾根など、使用できる他の値もいくつかあります。

関連する質問と回答

1. CSSの境界線の0.5px設定について？

2. FireFoxのボーダースタイルが異常

3.

border-imageについて

4.

css3 ボーダー画像の角丸の実装方法1.無料ビデオチュートリアル:

「php.cn Dugu Jiijian (2)-css ビデオチュートリアル」

2 php 中国語 Web サイトの無料ビデオチュートリアル: CSS ビデオチュートリアル

以上がCSS での境界線属性の使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。