CSS点線スタイルの作り方と点線スタイルの応用例-CSSチュートリアル-php.cn

CSS点線スタイルの作り方と点線スタイルの応用例

yulia

リリース： 2018-09-18 14:41:38

オリジナル

6451 人が閲覧しました

ページレイアウトでは、特定の効果を表現するために 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;

2. CSS 点線の適用例

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 で水平点線 CSS点線スタイルの作り方と点線スタイルの応用例を作成し、hr タグを使用して、hr にスタイルを追加します。タグ、ボーダー: 1px 点線 #FF0000

<hr   style="max-width:90%">

ログイン後にコピー

レンダリング:

4、ハイパーリンク点線下線 CSS点線スタイルの作り方と点線スタイルの応用例、ボーダーボトムを使用: 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 サイトの他の関連記事を参照してください。