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