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


Posted in HTML / CSS onJuly 08, 2016

先看看效果图:

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. body {margin:25px;}   
  6. div.polaroid {   
  7.   width: 40%;   
  8.   background-color: white;   
  9.   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);   
  10.   margin-bottom: 25px;   
  11. }   
  12. div.container {   
  13.   text-align: center;   
  14.   padding: 10px 20px;   
  15. }   
  16. </style>  
  17. </head>  
  18. <body>  
  19. <h2>响应式卡片</h2>  
  20. <div class="polaroid">  
  21.   <img src="rock600x400.jpg" alt="Norway" style="width:100%">  
  22.   <div class="container">  
  23.     <p>The Troll's tongue in Hardanger, Norway</p>  
  24.   </div>  
  25. </div>  
  26. </body>  
  27. </html>  
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
HTML / CSS 相关文章推荐
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
Jul 21 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 #HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 #HTML / CSS
css3media响应式布局实例
Jul 08 #HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 #HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 #HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 #HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 #HTML / CSS
You might like
php中长文章分页显示实现代码
2012/09/29 PHP
解析php类的注册与自动加载
2013/07/05 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
关于this和self的使用说明
2010/08/01 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
weblogic面试题
2016/03/07 面试题
项目经理聘任书
2014/03/29 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
地雷战观后感
2015/06/09 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
七年级作文之冬景
2019/11/07 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
MySQL如何使备份得数据保持一致
2022/05/02 MySQL
Java版 单机五子棋
2022/05/04 Java/Android
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android