编程 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学习之2D转换功能详解

Dec 23 HTML / CSS

CSS3之多背景background使用示例

Oct 18 HTML / CSS

一款css实现的鼠标经过按钮的特效

Sep 11 HTML / CSS

CSS Grid布局教程之什么是网格布局

Dec 30 HTML / CSS

什么是CSS3 HSLA色彩模式？HSLA模拟渐变色条

Apr 26 HTML / CSS

html5 touch事件实现页面上下滑动效果【附代码】

Mar 10 HTML / CSS

html5使用canvas实现图片下载功能的示例代码

Aug 26 HTML / CSS

HTML5实现表单自动验证功能实例代码

Jan 11 HTML / CSS

如何在Canvas中添加事件的方法示例

May 21 HTML / CSS

HTML5 HTMLCollection和NodeList的区别详解

Apr 29 HTML / CSS

css实现两栏布局，左侧固定宽，右侧自适应的多种方法

Aug 07 HTML / CSS

使用CSS实现小三角边框原理解析

Nov 07 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

Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)

2016/03/22 PHP

PHP设计模式之装饰器模式实例详解

2018/02/07 PHP

setTimeout 不断吐食CPU的问题分析

2009/04/01 Javascript

JS 密码强度验证(兼容IE,火狐,谷歌)

2010/03/15 Javascript

href下载文件根据id取url并下载

2014/05/28 Javascript

Node.js中child_process实现多进程

2015/02/03 Javascript

Javascript闭包与函数柯里化浅析

2016/06/22 Javascript

AngularJS基础 ng-if 指令用法

2016/08/01 Javascript

AngularJS基础 ng-mousemove 指令简单示例

2016/08/02 Javascript

react项目如何使用iconfont的方法步骤

2019/03/13 Javascript

微信小程序学习笔记之获取位置信息操作图文详解

2019/03/29 Javascript

layui关闭层级、简单监听的实例

2019/09/06 Javascript

Python实现将数据库一键导出为Excel表格的实例

2016/12/30 Python

python处理Excel xlrd的简单使用

2017/09/12 Python

python MNIST手写识别数据调用API的方法

2018/08/08 Python

Python mutiprocessing多线程池pool操作示例

2019/01/30 Python

Python 抓取微信公众号账号信息的方法

2019/06/14 Python

Python 给定的经纬度标注在地图上的实现方法

2019/07/05 Python

Python通过cv2读取多个USB摄像头

2019/08/28 Python

python3 requests库实现多图片爬取教程

2019/12/18 Python

Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例

2020/03/04 Python

如何基于线程池提升request模块效率

2020/04/18 Python

python安装和pycharm环境搭建设置方法

2020/05/27 Python

keras 获取某层的输入/输出 tensor 尺寸操作

2020/06/10 Python

Python魔术方法专题

2020/06/19 Python

Mio Skincare英国官网：身体紧致及孕期身体护理

2018/08/19 全球购物

RUIFIER官网：英国奢侈高级珠宝品牌

2020/06/12 全球购物

.NET里面什么时候需要调用垃圾回收

2015/06/01 面试题

广告学专业应届生求职信

2013/10/01 职场文书

《观舞记》教学反思

2014/04/16 职场文书

标准单位租车协议书

2014/09/23 职场文书

党的群众路线专项整治方案

2014/11/03 职场文书

2015年全国爱耳日活动总结

2015/02/27 职场文书

python b站视频下载的五种版本

2021/05/27 Python

Java工作中实用的代码优化技巧分享

2022/04/21 Java/Android

mysql如何查询连续记录

2022/05/11 MySQL