编程 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 相关文章推荐

CSS3教程(6):创建网站多列

Apr 02 HTML / CSS

用CSS3的box-reflect设置文字倒影效果的方法讲解

Mar 07 HTML / CSS

CSS3实现鼠标悬停显示扩展内容

Aug 24 HTML / CSS

CSS3 分类菜单效果

May 27 HTML / CSS

详解CSS3+JS完美实现放大镜模式

Dec 03 HTML / CSS

js实现移动端H5页面手指滑动刻度尺功能

Nov 16 HTML / CSS

HTML5网页音乐播放器的示例代码

Nov 09 HTML / CSS

HTML5 Canvas的性能提高技巧经验分享

Jul 02 HTML / CSS

HTML5制作3D爱心动画教程献给女友浪漫的礼物

Nov 05 HTML / CSS

html5各种页面切换效果和模态对话框用法总结

Dec 15 HTML / CSS

怎样实现H5+CSS3手指滑动切换图片的示例代码

May 05 HTML / CSS

如何在Canvas上的图形/图像绑定事件监听的实现

Sep 16 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

THINKPHP项目开发中的日志记录实例分析

2014/12/01 PHP

php 二维数组时间排序实现代码

2016/11/19 PHP

js split 的用法和定义 js split分割字符串成数组的实例代码

2012/05/13 Javascript

对 jQuery 中 data 方法的误解分析

2014/06/18 Javascript

javascript实现禁止右键和F12查看源代码

2014/12/26 Javascript

JS实现仿FLASH效果的竖排导航代码

2015/09/15 Javascript

jquery UI Datepicker时间控件的使用方法（加强版）

2015/11/07 Javascript

js实现页面跳转的几种方法小结

2016/05/16 Javascript

移动端脚本框架Hammer.js

2016/12/15 Javascript

解决Layui数据表格中checkbox位置不居中的方法

2018/08/15 Javascript

浅谈在Vue.js中如何实现时间转换指令

2019/01/06 Javascript

javascrit中undefined和null的区别详解

2019/04/07 Javascript

layui 表单标签的校验方法

2019/09/04 Javascript

在SSM框架下用laypage和ajax实现分页和数据交互的方法

2019/09/27 Javascript

基于VSCode调试网页JavaScript代码过程详解

2020/07/20 Javascript

关于element-ui表单中限制输入纯数字的解决方式

2020/09/08 Javascript

[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛败者组 BO3 第一场 8.23

2019/09/05 DOTA

Python生成随机数的方法

2014/01/14 Python

python中的多重继承实例讲解

2014/09/28 Python

python实现中文输出的两种方法

2015/05/09 Python

python3实现ftp服务功能（服务端 For Linux）

2017/03/24 Python

Python实现的圆形绘制(画圆)示例

2018/01/31 Python

python微信公众号之关键词自动回复

2018/06/15 Python

Python获取好友地区分布及好友性别分布情况代码详解

2019/07/10 Python

Python CVXOPT模块安装及使用解析

2019/08/01 Python

Python 操作 MySQL数据库

2020/09/18 Python

如何用用Python将地址标记在地图上

2021/02/07 Python

HTML里显示pdf、word、xls、ppt的方法示例

2020/04/14 HTML / CSS

node中使用shell脚本的方法步骤

2021/03/23 Javascript

英文版区域经理求职信

2013/10/23 职场文书

老人节标语大全

2014/10/08 职场文书

物业客服专员岗位职责

2015/04/07 职场文书

导游词之太原天龙山

2020/01/02 职场文书

如何理解python接口自动化之logging日志模块

2021/06/15 Python

如何利用opencv判断两张图片是否相同详解

2021/07/07 Python

mysql主从复制的实现步骤

2021/10/24 MySQL