ホームページ > 記事 > ウェブフロントエンド > 一般的な CSS 点線のサンプルチュートリアル

一般的な CSS 点線のサンプルチュートリアル

零下一度オリジナル: 2017-06-16 13:53:422749ブラウズ

DIV CSS 点線チュートリアルには、一般的な DIV 点線のケースをさまざまなスタイルで説明する CSS チュートリアルが含まれています。

このセクションでは、一般的な CSS 点線と DIV チュートリアルを紹介します。 CSS の点線、下線、リスト点線はすべて処理されます。

1.CSSボーダー点線

ここで、点線はborder属性の点線ボーダーで制御されます。以下に設定する CSS の高さ (CSS の高さ) と CSS の幅 (CSS の幅) は、デモを見やすくするために 350 ピクセルです。
1. 四辺の点線
border:1px 破線 #000; 黒い点線の境界線
CSS コード: .divcss5{border:1px 破線 #000; width:350px}
HTML コード: < ;div class="divcss5">私の四辺は黒い点線です16b28748ea4df4d9c2150843fecfba68
ここで枠線の略称を設定して、divcss5 セレクターの四辺の枠を 1px の黒い点線として定義します

2.左側:
CSS コード: .divcss5-1{border-left:1px 破線 #000; height:50px;width:350px} Html コード: 8dc7f26bbeb0b2d87fad8d7057caf02b私の左側は黒い点線の境界線950c0e09a208ea6a6c67c615a801fbc6
これは左側の黒い点線の境界線です

CSS コード: .divcss5-2{border-right:1px 破線 #000; height:50px;width:350px}

Html コード: d130731981e56f6edfc3accc115d1597右側は黒い点線の境界線です16b28748ea4df4d9c2150843fecfba68ここでは右側を黒い点線の境界線に設定します

4. 上端 (上端) は点線です:

CSS コード: .divcss5-3{border-top:1px 破線 #000; height:50px;width:350px}

Html コード: c01375deed980076d35367a1218bebb7私の上部は黒い点線の境界線です 16b28748ea4df4d9c2150843fecfba68ここでは上端(上端)を黒い点線の境界線として設定しています

5.点線:

CSS コード: .divcss5-4{border-bottom:1px 破線 # 000; height:50px;width:350px}

HTML コード: 8de9b8c1fb9699c8b3b7c3e5586585c1下端は黒い点線の境界線です16b28748ea4df4d9c2150843fecfba68ここで下端(下の境界線)を設定します。黒い点線の境界線

6. いずれかの辺が点線でなく、他の 3 つの辺が点線である場合

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

CSS コード: .divcss5-5{border: 1px 破線 #000;border-right:0; height:50px;width:350px}HTML コード: c4a633836d3210c4eccf46c53c0aaf8d右側の境界線には境界線がなく、他の 3 つの辺は黒い点線の境界線です 16b28748ea4df4d9c2150843fecfba68
ここでは、まずオブジェクトの 4 つの辺を黒の 1px に設定します。これは 3 辺の点線属性を設定するのと同じですが、前後の枠線属性の設定に注意してください。
上記の例の完全な DIV+CSS コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS 虚线 DIVCSS5实例说明<title>www.php.cn</title>
<style>
.divcss5{ border:1px dashed #000; height:50px; width:350px}
.divcss5-1{border-left:1px dashed #000; height:50px;width:350px}
.divcss5-2{border-right:1px dashed #000; height:50px;width:350px}
.divcss5-3{border-top:1px dashed #000; height:50px;width:350px}
.divcss5-4{border-bottom:1px dashed #000; height:50px;width:350px}
.divcss5-5{border:1px dashed #000; border-right:0;height:50px;width:350px}
/* www.divcss5.com实例 */
</style>
</head>
<body>
www.divcss5.com css虚线实例实例<br>
<div class="divcss5">我四边为虚线边框</div><br>
<div class="divcss5-1">我的左边为黑色虚线边框</div><br>
<div class="divcss5-2">我的右边为黑色虚线边框</div><br>
<div class="divcss5-3">我的上边为黑色虚线边框</div><br>
<div class="divcss5-4">我的下边为黑色虚线边框</div><br>
<div class="divcss5-5">我的右边边框无边线而其它三边为黑色虚线边框实例</div>
</body>
</html>

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

多くの場合、リンクされたテキストコンテンツに点線の下線が含まれるリンクを設定するか、マウスをその上に移動するように設定します。リンクされたテキストに点線の下線が表示されます。これを実現するにはどうすればよいでしょうか。ここでは CSS ハイパーリンクの点線下線について紹介します。 1. リンクされたテキストには点線の下線が付いています

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

デモ CSS コード:

a{ border-bottom:1px 破線 #111;}/* ここで、リンクされたテキストの下に表示される点線の下線を設定します*/
a:hover{ border:0;}/* ここで、マウスが通過した後のリンク text*/

Complete DIV CSS コード:

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

指示: text-decoration:none; これは CSS 下線 (ハイパーリンクのデフォルトの下線属性) を削除するためのものです

以上が一般的な CSS 点線のサンプルチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：css3のborderインスタンスについて詳しく解説次の記事：css3のborderインスタンスについて詳しく解説

続きを見る

一般的な CSS 点線のサンプル チュートリアル

関連記事

一般的な CSS 点線のサンプルチュートリアル