ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS点線スタイルの作り方と点線スタイルの応用例
CSS点線スタイルの作り方と点線スタイルの応用例
- yuliaオリジナル
- 2018-09-18 14:41:386463ブラウズ
ページ レイアウトでは、特定の効果を表現するために CSS 点線スタイル を使用する必要があることがよくありますが、多くの初心者はまだ CSS 点線スタイルに慣れていません。この記事では、CSS 点線スタイルについて説明します。それは、 CSSborder 属性を使用して点線スタイルを作成する方法 と、CSS 点線スタイルのいくつかの応用例です。例: CSS 点線の境界線 の使用、CSS 点線の下境界線 の使用、 点線 の使用など。困っている友達は参考にしてください。
1. CSS 点線の作り方
border-style 属性は要素の 4 つの境界線のスタイルを設定できます。
dotted: 点線、ほとんどのブラウザで実線として表示されます
dashed: 破線、ほとんどのブラウザで実線として表示されます
solid: 実線を定義します
none: no border
double: double line
CSS 点線スタイルの実装では、dashed、dotted の属性値を使用します。
border-style 属性は、1 つの値、2 つの値、3 つの値、または 4 つの値に設定できます。その意味は次のとおりです。
1. 点線、実線、二重破線。上の境界線が点線、右の境界線が実線、下の境界線が二重線、左の境界線が点線であることを意味します。 境界線スタイル: 点線の実線
は、上の境界線が点線であることを意味します。 、左右の境界線は実線、下の境界線は二重線です
3 border-style:dotted Solid
は、上下の境界線が点線、左右の境界線が実線であることを意味します。行数
4. border-style:dotted
は、4 つの境界線がすべて点線であることを意味します: border:border-width、border-style、border-color。したがって、幅 1px の黒い点線をボーダーとして書くことができます。 1px 破線 #000;
1. CSS 点線境界線
<style type="text/css">
div{border: 1px dashed #000;}
</style>
<body>
<div>生活不止眼前的苟且，还有诗和远方的田野</div>
</body>レンダリング:
2. li リスト点線分割、つまり CSS の点線の下境界線
レイアウトに css li タグを使用するページも多くあります。li の各行の下に点線がコンテンツを区切るために使用され、border-bottom が使用されます。これを達成するために使用されます。 <style type="text/css">
li{border-bottom: 1px dashed #000;}
</style>
<body>
<ul>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
<li>have a nice day </li>
</ul>
</body>レンダリング:
3. CSS で水平点線 
を作成し、hr タグを使用して、hr にスタイルを追加します。タグ、ボーダー: 1px 点線 #FF0000
<hr style="max-width:90%">
レンダリング:
4、ハイパーリンク点線下線 
、ボーダーボトムを使用: 1px破線 #FF0000 は、a タグの内容を強調します。
<style type="text/css">
a{text-decoration: none;border-bottom: 1px dashed #FF0000;}
</style>
<body>
<div>欢迎大家来<a href="#">PHP中文网</a>学习知识</div>
</body>レンダリング:
以上、CSSの点線スタイルの作成方法と、ページレイアウトにおける点線スタイルの応用例を紹介しました。皆さん、もっと試してみて、さまざまな効果を試してみてください。この記事が学ぶことが好きなあなたに役立つことを願っています。以上がCSS点線スタイルの作り方と点線スタイルの応用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。