分享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制作精致的照片墙特效
Jun 07 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
background-position百分比原理详解
May 08 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
PHP has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
PHP抽象类 介绍
2012/06/13 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
使用Python对Access读写操作
2017/03/30 Python
对python的文件内注释 help注释方法
2018/05/23 Python
详解Python sys.argv使用方法
2019/05/10 Python
Django如何将URL映射到视图
2019/07/29 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
十岁生日家长答谢词
2014/01/17 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
技术股东合作协议书
2014/12/02 职场文书
优秀员工推荐材料
2014/12/20 职场文书
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang