ホームページ > 記事 > ウェブフロントエンド > ソリッド CSS Border プロパティの使用の概要

ソリッド CSS Border プロパティの使用の概要

不言オリジナル: 2018-06-12 11:11:4510908ブラウズ

この記事では主に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 を

タグにそれぞれ追加する必要があります。

2.ナビゲーションメニューに分割線を追加します

上記の例の小さな白い線は、もちろん画像で行うことができますが、ここではCSSの「border」拡張属性を使用して境界線を描画します。ちなみに、このコードははるかに少ないです。境界線の 1 辺は、上の例の境界線の 4 辺と同様です。境界線の 4 辺の属性は次のとおりです。
境界線の名前: border-top (上の境界線)、border-right。 (右の境界線)、border-bottom (下の境界線)、および border-left (左の境界線) の各境界線の種類、幅、色は「boder」属性と同じです。例えばこの例では、各セルの左枠線を白線、線の幅を「1px」の実線として定義したい場合のCSSコードは以下の通りです。境界線を個別に指定する場合、特定の値が指定されていない場合は、デフォルトの初期値が使用されます。コードを書かずに Dreamweaver で CSS を定義できるのは非常に便利です。よく使用する境界線を一度定義しておいて、必要なときに呼び出すだけで済みます。
3. 境界線に異なる幅と色の境界線を使用するもちろん、この例の効果は上記の例のメソッドを使用して実現できますが、属性に別の結合メソッドを使用することもできます。 4 つのエッジの値がまとめて分類されます。たとえば、この例のコードは次のとおりです。

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 プロパティの使用の概要

関連記事