Wenn wir über den gepunkteten Linienstil von CSS sprechen, denken wir an die durchgezogene Umrandung. Die Wahrscheinlichkeit, dass im Layout der Webseite eine durchgezogene Linie verwendet wird, ist wahrscheinlich am höchsten, aber wissen Sie, dass es gepunktete Linien gibt? Asche gepunktete Linien? Heute stelle ich Ihnen diese beiden Methoden zum Erstellen gepunkteter Linien mit Attributen vor.
Apropos CSS-Stil mit gepunkteten Linien: „Solid in Border“ wird am wahrscheinlichsten im Webseitenlayout verwendet. Wenn Sie den Effekt einer gepunkteten CSS-Linie erzielen möchten, können Sie diese auch verwenden Bild als Hintergrund, aber es wird nicht empfohlen, den CSS-Stil mit gepunkteten Linien zu verwenden, um diesen gepunkteten Linienstil zu erzielen. Beides ist gepunktet und gestrichelt sind CSS-gepunktete Linien, aber sie sind unterschiedlich.
1.gestrichelte gepunktete Linie
<!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/> <title>dotted虚线</title> <style type="text/css"> *{ margin:100px; padding:0; } body{ width:1000px; margin:0 auto; } .box{ width:300px;height:50px; text-align:center; padding-top:30px; border:1px dotted #000; } </style> </head> <body> <div>大家好,我是dotted虚线!</div> </body> </html>
2.gestrichelte gepunktete Linie
<!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/> <title>dashed虚线</title> <style type="text/css"> *{ margin:100px; padding:0; } body{ width:1000px; margin:0 auto; } .box{ width:300px;height:50px; text-align:center; padding-top:30px; border:1px dashed #000; } </style> </head> <body> <div>大家好,我是dashed虚线!</div> </body> </html>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Für weitere spannende Dinge Bitte achten Sie auf PHP-Chinesisch. Weitere verwandte Artikel online!
Verwandte Lektüre:
So verwenden Sie die CSS3-Funktion „rotate()“
CSS3 zur Implementierung von Breadcrumb-Code im kreisförmigen Stil Schritte
Mehrere Möglichkeiten zur Positionierung in Front-End-Projekten
Das obige ist der detaillierte Inhalt vonSo implementieren Sie den CSS-Stil mit gepunkteten Linien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!