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

发布时间：2016-07-08 11:05:35 作者：佚名

这篇文章主要为大家分享了CSS3制作卡片式图片的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

先看看效果图：

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>

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

Tag：CSS3 卡片式图片

相关文章

CSS3实现圆角、阴影、透明效果并兼容各大浏览器
圆角、阴影、透明的实现方法有很多，之前的获取比较复杂，用CSS3就方便很多了，而且对浏览器的支持性也比较好，下面简单为大家介绍下
2014-08-08
css3圆角边框和边框阴影示例
这篇文章主要介绍了css3圆角边框和边框阴影示例,需要的朋友可以参考下
2014-05-05
css3圆角样式分享自定义按钮样式
css3自定义渐变圆角按钮样式分享，大家参考使用吧
2013-12-27
让IE6、IE7、IE8支持CSS3的圆角、阴影样式
想做个页面用到css3的圆角和阴影效果，但ie浏览器不支持，之前也听说有插件可以实现，周六在网上找到了一个方法，原文如下：但凡是前端工程师，都知道IE6，IE7，IE8不支
2013-07-02
CSS3的Border-radius轻松制作圆角
前面系统总结了CSS3中Gradient和RGBA的用法，今天我们在一起来看看CSS3中制作圆角的属性border-radius的具体用法;在CSS2中，大家都碰到过圆角的制作,如今CSS3中的border-ra
2012-12-24
CSS3实现DIV圆角效果完整代码
本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9。IE6、7、8不支持
2012-10-10
CSS制作箭头图标代码(圆，三角形，椭圆)
css3功能非常强大，之前需要图片完成的icon，现在我们只需要几段css代码就可以实现此功能。下面给大家分享纯css制作的圆，椭圆，三角形箭头图标，非常使用，需要的朋友参考
2016-03-30
HTML5 Canvas中绘制椭圆的4种方法
这篇文章主要介绍了HTML5 Canvas中绘制椭圆的4种方法,本文讲解了参数方程法、均匀压缩法、三次贝塞尔曲线法、光栅法等4种方法,需要的朋友可以参考下
2015-04-24
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Canvas里绘制椭圆是一个很常见的需求，但是目前大多数浏览器还没有实现该方法，因此经常会使用arc或者arcTo方法结合scale变形来绘制椭圆，感兴趣的朋友可以了解下，希望可
2013-03-25
在html5的Canvas上绘制椭圆的几种方法总结
HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同，感兴趣的朋友可以参考下
2013-01-07

最新评论