Home >Web Front-end >CSS Tutorial >Share the detailed method of creating card-style images with CSS3
Share the detailed method of creating card-style images with CSS3
- 高洛峰Original
- 2017-03-07 15:18:202122browse
Let’s take a look at the renderings first:
##
<!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>
The above is the entire content of this article, I hope it will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website. For more detailed methods of sharing CSS3 card-style images, please pay attention to the PHP Chinese website for related articles! Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed introduction to CSS margin knowledge pointsNext article：Detailed introduction to CSS margin knowledge points