CSS を使用して HTML フォントに境界線効果を追加する方法を段階的に説明します (コード共有)

前回の記事「HTML Webページでセンタリング効果を実現する方法(コード共有)」では、Webページ全体をセンタリングする方法を紹介しました。次の記事では、CSS を使用して HTML 要素のフォントに枠線効果を追加する方法を紹介しますので、一緒に見てみましょう。

#html 要素は、border 属性を使用して境界線を追加します。

border 短縮表現プロパティは、1 つの宣言ですべてのボーダー プロパティを設定します。

#border 属性の 3 つの要素

• border-width デフォルトは 1px

• # # border-style

  境界線スタイル

• border-color

  デフォルトは黒です

border-スタイル

境界線のスタイルをオプションに設定しますコード例

<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>

コードの効果

方法の手順

1 、 div タグの class 属性を mydiv

<div class="mydiv">随意写文字</div>

1、

タグ、の CSS スタイルに設定します。ページ。

<style type="text/css">...</style>

2. mydiv の div のスタイルを設定します。width 属性と height 属性を使用して、div の幅を 85 ピクセルに、高さを 20 ピクセルに設定します。

.mydiv{
	width: 85px;
	height: 20px;
	}

3. 4 つの境界線をすべて 1px に設定して、灰色の境界線を実現します。

1、

border-left

プロパティは div の左の境界線を設定し、2、

border-right

プロパティは div の右の境界線を設定します。 div; 3,

border-top

属性は div の上境界線を設定します; 4,

border-bottom

属性は下境界線を設定します部門の。

border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc

コードの効果

推奨学習:

CSS ビデオ チュートリアル

以上がCSS を使用して HTML フォントに境界線効果を追加する方法を段階的に説明します (コード共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。