编程 HTML / CSS

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

Posted in HTML / CSS onJuly 08, 2016

先看看效果图：

分享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制作卡片式图片的方法

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

无需JS和jQuery代码实现CSS3鼠标浮动放大图片

Nov 21 HTML / CSS

CSS3 Calc实现滚动条出现页面不跳动问题

Sep 14 HTML / CSS

css3 pointer-events 介绍详解

Sep 18 HTML / CSS

纯css实现照片墙3D效果的示例代码

Nov 13 HTML / CSS

css3 伪类选择器快速复习小结

Sep 10 HTML / CSS

html5+css3之制作header实例与更新

Dec 21 HTML / CSS

Html5实现单张、多张图片上传功能

Apr 28 HTML / CSS

简单html5代码获取地理位置

Mar 31 HTML / CSS

详解html5页面 rem 布局适配方法

Jan 12 HTML / CSS

详解Html5 监听拦截Android返回键方法

Apr 18 HTML / CSS

HTML5+CSS+JavaScript实现捉虫小游戏设计和实现

Oct 16 HTML / CSS

VW、VH适配移动端的解决方案与常见问题

May 21 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最常用的2种设计模式工厂模式和单例模式介绍

2012/08/14 PHP

php使用wordwrap格式化文本段落的方法

2015/03/17 PHP

PHP基于堆栈实现的高级计算器功能示例

2017/09/15 PHP

PHP静态延迟绑定和普通静态效率的对比

2017/10/20 PHP

PDO::lastInsertId讲解

2019/01/29 PHP

IE6弹出“已终止操作”的解决办法

2010/11/27 Javascript

Javascript/Jquery——简单定时器的多种实现方法

2013/07/03 Javascript

jquery validate在ie8下的bug解决方法

2013/11/13 Javascript

给html超链接设置事件不使用href来完成跳

2014/04/20 Javascript

jQuery实现的产品自动360度旋转展示特效源码分享

2015/08/21 Javascript

js弹出框、对话框、提示框、弹窗实现方法总结(推荐)

2016/05/31 Javascript

jQuery操作iframe中js函数的方法小结

2016/07/06 Javascript

AngularJs基于角色的前端访问控制的实现

2016/11/07 Javascript

javascript另类方法实现htmlencode()与htmldecode()函数实例分析

2016/11/17 Javascript

微信小程序增、删、改、查操作实例详解

2017/01/13 Javascript

Node.js中多进程模块Cluster的介绍与使用

2017/05/27 Javascript

React学习笔记之条件渲染（一）

2017/07/02 Javascript

浅谈Node.js爬虫之网页请求模块

2018/01/11 Javascript

JavaScript实现简易聊天对话框(加滚动条)

2020/02/10 Javascript

javascript+css实现俄罗斯方块小游戏

2020/06/28 Javascript

Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

2020/09/04 Javascript

[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn

2014/05/22 DOTA

Python 实现一个颜色色值转换的小工具

2016/12/06 Python

Python爬取qq music中的音乐url及批量下载

2017/03/23 Python

分分钟入门python语言

2018/03/20 Python

python opencv检测目标颜色的实例讲解

2018/04/02 Python

10分钟教你用Python实现微信自动回复功能

2018/11/28 Python

Python学习笔记之自定义函数用法详解

2019/06/08 Python

三步实现Django Paginator分页的方法

2019/06/11 Python

在PyCharm中遇到pip安装失败问题及解决方案(pip失效时的解决方案)

2020/03/10 Python

Python通用唯一标识符uuid模块使用案例

2020/09/10 Python

编写html5时调试发现脚本php等网页js、css等失效

2013/12/31 HTML / CSS

世界上最值得信赖的多日游在线市场：TourRadar

2018/07/20 全球购物

给排水专业应届生求职信

2013/10/12 职场文书

安全演讲稿大全

2014/05/09 职场文书

Django模型层实现多表关系创建和多表操作

2021/07/21 Python