Heim > Artikel > Web-Frontend > Teilen Sie die detaillierte Methode zum Erstellen von Bildern im Kartenstil mit CSS3
Teilen Sie die detaillierte Methode zum Erstellen von Bildern im Kartenstil mit CSS3
- 高洛峰Original
- 2017-03-07 15:18:202116Durchsuche
Werfen wir zunächst einen Blick auf die Renderings:
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:25px;}
p.polaroid {
width: 40%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
p.container {
text-align: center;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>响应式卡片</h2>
<p class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="max-width:90%">
<p class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</p>
</p>
</body>
</html>
Das ist alles Für den Inhalt dieses Artikels hoffe ich, dass er zum Lernen aller beiträgt, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.
Ausführlichere Methoden zum Teilen von Bildern im CSS3-Kartenstil finden Sie auf der chinesischen PHP-Website für verwandte Artikel!
Stellungnahme：
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
Vorheriger Artikel：Detaillierte Einführung in die CSS-Marge-WissenspunkteNächster Artikel：Detaillierte Einführung in die CSS-Marge-Wissenspunkte