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

高洛峰 原创: 2017-03-07 15:18:20 1660浏览

先看看效果图：

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

<!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="width:100%">
  <p class="container">
    <p>The Troll's tongue in Hardanger, Norway</p>
  </p>
</p>
</body>
</html>

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

更多分享CSS3制作卡片式图片的详细方法相关文章请关注PHP中文网！

CSS3 卡片式图片 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：详细介绍CSS之margin知识点下一条：CSS3制作缩略图的详细过程分析