Heim > Artikel > Web-Frontend > Wie man einen CSS-Stil für gepunktete Linien erstellt und Beispiele für die Anwendung des Stils für gepunktete Linien
Wie man einen CSS-Stil für gepunktete Linien erstellt und Beispiele für die Anwendung des Stils für gepunktete Linien
- yuliaOriginal
- 2018-09-18 14:41:386408Durchsuche
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
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>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>Rendering:
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="border: 1px dotted #FF0000;">Rendering:
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> Rendering:
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!