Wie man einen CSS-Stil für gepunktete Linien erstellt und Beispiele für die Anwendung des Stils für gepunktete Linien-CSS-Tutorial-php.cn

Wie man einen CSS-Stil für gepunktete Linien erstellt und Beispiele für die Anwendung des Stils für gepunktete Linien

yulia

Freigeben： 2018-09-18 14:41:38

Original

6444 Leute haben es durchsucht

Um beim Seitenlayout einen bestimmten Effekt zu erzielen, ist es oft notwendig, den CSS-Stil mit gepunkteten Linien zu verwenden, aber viele Anfänger sind mit dem CSS-Stil mit gepunkteten Linien noch nicht vertraut. In diesem Artikel erfahren Sie mehr darüber , So verwenden Sie die CSSborder-Eigenschaft, um einen gepunkteten Linienstil zu erstellen und einige Anwendungsbeispiele für den CSS-gepunkteten Linienstil. Zum Beispiel: die Verwendung von CSS-gepunktetem Rand, die Verwendung von CSS-gepunktetem unteren Rand, die Verwendung von einer gepunkteten Linie usw. Freunde in Not können sich darauf berufen.

1. So erstellen Sie gepunktete CSS-Linien

Das Attribut „border-style“ kann den Stil der vier Ränder eines Elements festlegen wie folgt:
gepunktet: gepunktet, in den meisten Browsern als durchgezogene Linie dargestellt
gestrichelt: gestrichelte Linie, in den meisten Browsern als durchgezogene Linie dargestellt
durchgezogen: definierte durchgezogene Linie
keine: kein Rand
double: Die Implementierung des gestrichelten CSS-Stils mit zwei Linien
besteht darin, die Attributwerte gestrichelt und gepunktet zu verwenden.

Das Attribut „border-style“ kann auf einen Wert, zwei Werte, drei Werte oder vier Werte festgelegt werden:
1 bedeutet: Der obere Rand ist gepunktet, der rechte Rand ist eine durchgezogene Linie, der untere Rand ist eine doppelte Linie und der linke Rand ist eine gepunktete Linie
2. Randstil: gepunktet, durchgezogen, doppelt
bedeutet, dass der obere Rand gepunktet ist , und der rechte und linke Rand sind eine durchgezogene Linie, der untere Rand ist eine doppelte Linie
3 border-style:dotted solid
bedeutet, dass der obere und untere Rand gepunktet sind und der rechte und linke Rand durchgezogen sind Linien
4. border-style:dotted
bedeutet, dass alle vier Ränder gepunktet sind

Border-Schreibmethode: border:border-width, border-style, border-color. Daher kann eine schwarze gestrichelte Linie mit einer Breite von 1 Pixel als Rand geschrieben werden: 1 Pixel gestrichelt #000;

2. Anwendungsbeispiele für CSS-gestrichelte Linie

1. CSS-Rand mit gestrichelter Linie

<style type="text/css">
   div{border: 1px dashed #000;}
  </style>
 <body>
  <div>生活不止眼前的苟且，还有诗和远方的田野</div>
 </body>

Nach dem Login kopieren

Rendering:

2 , das heißt, CSS-gepunktete Linie unterer Rand

Es gibt auch viele Seiten, die CSS-Li-Tags für das Layout verwenden. Unter jeder Zeile von Li werden gepunktete Linien verwendet, und der Rand unten ist verwendet, um dies zu erreichen.

<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>

Nach dem Login kopieren

Rendering:

Wie man einen CSS-Stil für gepunktete Linien erstellt und Beispiele für die Anwendung des Stils für gepunktete Linien

3. CSS eine horizontale gepunktete Linie , verwenden Sie das hr-Tag und fügen Sie dann Stile zum hr hinzu Tag, Rand: 1px gepunktet #FF0000

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

Nach dem Login kopieren

Rendering:

Wie man einen CSS-Stil für gepunktete Linien erstellt und Beispiele für die Anwendung des Stils für gepunktete Linien

4. Hyperlink gepunktet unterstrichen , Rand unten verwenden: 1px gestricheltes #FF0000, hebt den Inhalt im a-Tag hervor.

<style type="text/css">
   a{text-decoration: none;border-bottom: 1px dashed #FF0000;}
</style>
 <body>
  <div>欢迎大家来<a href="#">PHP中文网</a>学习知识</div>
 </body>

Nach dem Login kopieren

Rendering:

Wie man einen CSS-Stil für gepunktete Linien erstellt und Beispiele für die Anwendung des Stils für gepunktete Linien

Das Obige stellt die Produktionsmethode des CSS-Stils mit gepunkteten Linien sowie die Anwendungsbeispiele des Stils mit gepunkteten Linien im Seitenlayout vor. Freunde, ihr könnt es öfter ausprobieren und verschiedene Effekte ausprobieren. Ich hoffe, dieser Artikel kann euch, die gerne lernen, helfen!

Das obige ist der detaillierte Inhalt vonWie man einen CSS-Stil für gepunktete Linien erstellt und Beispiele für die Anwendung des Stils für gepunktete Linien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!