Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So implementieren Sie den CSS-Stil mit gepunkteten Linien

php中世界最好的语言
Freigeben: 2017-12-01 11:43:12
Original
3096 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage