ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して HTML フォントに境界線効果を追加する方法を段階的に説明します (コード共有)
前回の記事「HTML Webページでセンタリング効果を実現する方法(コード共有)」では、Webページ全体をセンタリングする方法を紹介しました。次の記事では、CSS を使用して HTML 要素のフォントに枠線効果を追加する方法を紹介しますので、一緒に見てみましょう。
#html 要素は、border 属性を使用して境界線を追加します。
border 短縮表現プロパティは、1 つの宣言ですべてのボーダー プロパティを設定します。
#border 属性の 3 つの要素border-width デフォルトは 1px
境界線スタイル
デフォルトは黒です
境界線のスタイルをオプションに設定しますコード例
<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>
.mydiv{ width: 85px; height: 20px; }
3. 4 つの境界線をすべて 1px に設定して、灰色の境界線を実現します。
1、
border-left プロパティは div の左の境界線を設定し、2、
プロパティは div の右の境界線を設定します。 div; 3,
属性は div の上境界線を設定します; 4,
属性は下境界線を設定します部門の。 <pre class="brush:html;toolbar:false">border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc</pre>
コードの効果
推奨学習:
CSS ビデオ チュートリアル以上がCSS を使用して HTML フォントに境界線効果を追加する方法を段階的に説明します (コード共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。