ホームページ > 記事 > ウェブフロントエンド > 点線の境界線と点線を実装するための DIV および CSS メソッド |

点線の境界線と点線を実装するための DIV および CSS メソッド |

不言オリジナル: 2018-06-28 13:44:433709ブラウズ

この記事はDIVとCSSで点線の境界線を実現する方法を主に紹介します。これは、特定の参考値を持っていますので、必要な友達に共有してください

。 border 属性によるボーダーボーダー制御点線

1. CSS ボーダー点線 - TOP
ここでは、点線はボーダー属性の点線ボーダーで制御されています。以下に設定する css の高さ (css height) と css width (css width) は、デモを見やすくするために 350 ピクセルです。

1. 四辺は点線です

border:1px dashed #000; 黑色虚线边框[code/]

例:
CSSコード:

[code].pcss5{border:1px dashed #000; height:50px;width:350px}

Htmlコード:

<p class="pcss5">我的四边为黑色虚线边框</p>

ここで、4辺に1pxの黒い点線の枠線を定義する枠線省略方法を設定します。側面

2. 左側は点線です:

CSS コード:

.pcss5-1{border-left:1px dashed #000; height:50px;width:350px}

Html コード:

<p class="pcss5-1">我的左边为黑色虚线边框</p>

左側に黒い点線の境界線があります

3 番目、右側の点線:

CSSコード：

.pcss5-2{border-right:1px dashed #000; height:50px;width:350px}

Htmlコード：

<p class="pcss5-2">我的右边为黑色虚线边框</p>

こちら右側に黒い点線の枠線を設定します

4番目、上辺（上端）は点線です：

CSSコード：

.pcss5-3{border-top:1px dashed #000; height:50px;width:350px}

Htmlコード:

<p class="pcss5-3">我的上边为黑色虚线边框</p>

ここでは、上辺(上端)に黒い点線の枠線が設定されています

5. 下辺(下端)は点線です:

CSSコード:

.pcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}

Htmlコード:

<p class="pcss5-4">我的下边为黑色虚线边框</p>

ここでは、下端（下端）を黒い点線の枠線として設定しています

6. どちらかの辺は点線ではなく、残りの3辺は点線です

点線ではない右側の枠線を追加しますが、エッジはなく、他の 3 つの側面は黒い点線の境界線です

CSS コード:

.pcss5-5{border:1px dashed #000;border-right:0; height:50px;width:350px}

Html コード:

我的右边边框无边线而其它三边为黑色虚线边框实例 
这里通过先设置了该对象四边为黑色1px虚线边框，紧接着又设置一边边线为0的设置，这样相当于设置了3边的边框虚线属性，但是这里注意边框属性设置前后顺序。 
以上实例完整p+CSS代码如下： 
 
 
 
 
CSS 虚线 pCSS5实例说明www.pcss5.com 
 
 
 
www.pcss5.com css虚线实例实例
我四边为虚线边框
<p class="pcss5-1">我的左边为黑色虚线边框</p>
<p class="pcss5-2">我的右边为黑色虚线边框</p>
<p class="pcss5-3">我的上边为黑色虚线边框</p>
<p class="pcss5-4">我的下边为黑色虚线边框</p>
我的右边边框无边线而其它三边为黑色虚线边框实例

2. ハイパーリンクの点線の下線 - TOP

リンクされたテキストコンテンツに、リンクに点線の下線を付けるように設定することがよくあります。、またはリンクされたテキストの上にマウスを移動すると、点線の下線が表示されます。これを実現するには、CSS ハイパーリンクの点線下線について説明します。

1. リンクされたテキストには点線の下線が付いています

ここでは、CSS border プロパティを使用して、オブジェクトのハイパーリンクの CSS スタイルも制御します。

デモ CSS コード:

a{ border-bottom:1px dashed #111;}/* 这里设置带链接文字下方出现虚线下划线*/

a:hover{ border:0;}/* 这里设置鼠标经过被链接文字时不出现虚线 */

完全な div CSS コード:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>CSS 虚线下划线 pCSS5实例说明</title> 
<style> 
a{ border-bottom:1px dashed #111;text-decoration:none;} 
a:hover{ border:0;} 
</style> 
</head> 
<body> 
欢迎到<a href="http://www.pcss5.com/">CSS教程网</a>的www.pcss5.com - pcss5学习CSS 
</body> 
</html>

説明: text-decoration:none; これは CSS 下線 (ハイパーリンクのデフォルトの下線属性) を削除します

上記は CSS ハイパーリンクですテキストには破線と下線が引かれています。

2. リンクされたテキストの上にマウスを置くと、点線の下線が表示されます

これは、ハイパーリンク A の下線を削除し、マウスがその上を通過したときに CSS テキストの下の点線の境界線に下線を引くだけです。。

対応する CSS コード:

a{text-decoration:none;}
[/code]a:hover{border-bottom:1px dashed #111;} [/code]

これで、ハイパーリンクの下線の例を試してみるとよいでしょう。

3. リスト CSS 点線下線 - 上部

CSS LI に遭遇したとき、多くの場合、この CSS リストスタイルのコンテンツの各行の下部が以下に示すように点線で区切られることを望みます

ここで必要なのは、 LIの下枠を点線に設定するだけです。

まず、CSS の初期化時に CSS コードを設定します:

li{border-bottom:1px dashed #111;}

上に示すように、li のリストコンテンツの点線分離効果を実現できます (各 li コンテンツの下部は点線の境界線です)
また、下の点線は点のように非常に小さく、境界線を表現するのが困難です。このとき、点線のドット絵 (片側の高さ 3 ピクセルのカラー絵) が必要です。 Wide を実現できます)

対応する CSS li コード:

Li{background:url(点图片路径) repeat-x 0 bottom}

ここでは詳細なデモはありません。また、VIP でさまざまな li を作成するための CSS の知識ポイントを詳しく紹介し、デモします。

4. CSS で水平点線を定義します - TOP

これは理解しやすく、p オブジェクトに境界点線を設定することでも実現できます。また、hr 水平線ラベルの点線属性を設定することもできます。水平の点線の分割線を作成します。

次のようになります:

pに水平点線を設定します:

.pcss5{ height:1px; width:100%; border-bottom:1px dashed #000;}

対応するHTMLコード:

<p class="pcss5"></p>

hr水平分割線の属性を設定します:

最初の方法は、点線属性を設定することです。 hr タグ内:

<hr size=1 style="color: blue;border-style:dashed ;width:100%">

ここでの説明は、size が hr の値であり、片側を 1 に設定できるというものです。

2 番目の方法は、CSS コードまたは CSS ファイルで hr の css 属性を定義することです

hr {border-top:1px dashed #00F ; }

は、HTML の hr タイトルコードに対応します:

<hr size=1>

ここでは、hr の境界線を上部または下部に設定します上下の辺を 1 ピクセルの青い点線の境界線に設定し、hr のサイズを最初の値とほぼ同じ 1 に設定します。唯一の違いは、hr タグが html に表示される場合、hr タグの属性は次のとおりです。 Web ページが複数回表示される場合は、コードの量を減らすことができます。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

点線の境界線と点線を実装するための DIV および CSS メソッド |

関連記事