ホームページ > 記事 > ウェブフロントエンド > ソリッド CSS Border プロパティの使用の概要
この記事では主にCSSのBorder属性の使い方を紹介していますので、必要な方はぜひ参考にしてみてください。範囲を決定できる HTML タグの境界線 (TD、p など) を使用すると、テキストに境界線を追加したり、ナビゲーション メニューに区切り線を追加したりできます。興味のある友人は、以下でその例を共有します。
制作者 Webをしている人なら誰しも一度は線引きに悩んだ経験があるのではないでしょうか? まずはCSSの属性(TDやpなど)を理解しましょう。 ) 範囲を決定できる境界線を描画します。この機能を使用すると、境界線の種類、幅、色を定義できます。以下では、例を通してその応用スキルを説明します。1. テキストに境界線を追加します
上の例では、境界線の色と太さが可変であることを示すために、テキストにさまざまな境界線を追加しています。
最初の境界線の CSS コードは次のとおりです: style="max-width:90%";
「border」の後の 3 つのパラメーターの意味は次のとおりです。境界線の幅は次のとおりです。境界線:実線(実線)、境界線の色:赤(赤)。
境界線の幅には、細(細い線)、中(中程度の太い線)、太い(太い線)の 3 つの標準値があります。
さらに、幅は 1pt、5px、2cm などカスタマイズすることもできます。 、など。
境界線の種類には9つの明確な値があります: none (境界線なし)、dotted (点で構成される破線)、dashed (短い線で構成される破線)、solid (実線)、double (二重線、二重線) width) とそれらの間の空白部分の幅は、border-width)、groove (3D 溝状のボーダー)、ridge (3D リッジ状のボーダー)、inset (3D インラインボーダー、濃い色) で定義された幅と等しくなります。 、アウトセット (3D インライン境界線、明るい色)、
注: システムがこれらの境界線の属性値をサポートしていない場合は、「点線」、「破線」、「二重」、「溝」、「尾根」が使用されます。 "、"inset"、"outset" は "solid" に置き換えられます。
境界線の色: #00ffcc などの 16 進数のカラーコードを使用できます。
上記の例からわかるように、テキストに枠線を追加するのは非常に簡単です。説明しなくても、次の枠線の設定は理解できます。テキストに境界線を追加するには、CSS を
タグに追加します。複数のテキストに境界線を追加するには、まずそれらのテキストを p タグで囲みます。次に、
タグに CSS を追加します。テキスト行に複数の異なる境界線を追加する場合は、テキストを表に配置してから、CSS を
style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。
从上面可以看出,我把边框线的类型、宽度和颜色归类在一起定义了,这里请注意几点:
一、四条边框线的位置顺序是:上边框线、右边框线、下边框线、左边框线;
二、我在本例中边框线的类型只取了一种实线类型,实际上四条边也可以分别定义不同的类型;
三、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值,则其余三个自动取相同值,如:border-style:solid与border-style:solid solid solid solid的效果完全一样;如果仅给出两个或三个值,那么缺失边的属性值把取与对边相同的值。如:boder-width:thin thick与border-width:thin thick thin thick效果相同,border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。
Border属性的灵活应用,可以产生许多特殊效果,方法与上面介绍的相同。
例子:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>一列固定宽度——</title> <style type="text/css"> <!-- #layout { border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px; width: 300px; } --> </style> </head> <body> <p id="layout">hfhfg</p> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上がソリッド CSS Border プロパティの使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。