特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

分享CSS3制作卡片式图片的方法

来源：互联网收集：自由互联发布时间：2021-06-04

先看看效果图： XML/HTML Code 复制内容到剪贴板 !DOCTYPEhtml html head style body{margin:25px;} div.polaroid{ width:40%; background-color:white; box-shadow:04px8px0rgba(0,0,0,0.2),06px20px0rgba(0,0,0,0.19); margin-bottom:25px;

先看看效果图：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:25px;}
div.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;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>响应式卡片</h2>
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。

上一篇：详解IE浏览器的haslayout属性及相关兼容性问题解决
下一篇：CSS3制作缩略图的详细过程

分享CSS3制作卡片式图片的方法

相关文章