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

作者：佚名字体：[增加减小] 来源：互联网时间：2017-06-02

本文主要包含css3响应式布局,html5 css3响应式布局,css3响应式,css3响应式导航菜单,响应式加 css3动画等相关知识,佚名希望在学习及工作中可以帮助到您

先看看效果图：

</div>

<!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>

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

您可能想查找下面的文章:

相关文章

2017-06-02纯css3实现效果超级炫的checkbox复选框和radio单选框
2017-06-02css3 iphone玻璃透明气泡完美实现
2017-06-02利用CSS3实现动态的二级三级菜单效果实例源码
2017-06-02纯CSS3实现鼠标悬停提示气泡效果
2017-06-02使用CSS3的font-face字体嵌入样式的方法讲解
2017-06-02使用before和:after伪类制作css3圆形按钮
2017-06-02css3简单练习实现遨游浏览器logo的绘制
2017-06-02让IE6支持css3，让 IE7、IE8 都支持CSS3
2017-06-02CSS3 3D位移translate效果实例介绍
2017-06-02CSS3哪些新特性值得称赞