编程 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伸缩布局盒模型Flex布局

Aug 20 HTML / CSS

HTML5拖放功能_动力节点Java学院整理

Jul 13 HTML / CSS

HTML5标签小集

Aug 02 HTML / CSS

HTML5中新标签和常用标签详解

Mar 07 HTML / CSS

HTML5在canvas中绘制复杂形状附效果截图

Jun 23 HTML / CSS

html5生成柱状图(条形图)效果的实例代码

Mar 25 HTML / CSS

html5表单及新增的改良元素详解

Jun 07 HTML / CSS

浅谈Html5中视频音频标签进度条的问题

Jul 26 HTML / CSS

基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例

Jul 31 HTML / CSS

Html5基于canvas实现电子签名并生成PDF文档

Dec 07 HTML / CSS

Html5同时支持多端sdk的小技巧

Nov 17 HTML / CSS

使用CSS定位HTML元素的实现方法

Jul 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

php数组函数序列之array_push() 数组尾部添加一个或多个元素（入栈），返回新长度。

2011/11/07 PHP

PHP文章按日期(月日)SQL归档语句

2012/11/29 PHP

php设计模式小结

2013/02/15 PHP

laravel5.6 框架操作数据 Eloquent ORM用法示例

2020/01/26 PHP

一个tab标签切换效果代码

2009/03/27 Javascript

基于JQuery框架的AJAX实例代码

2009/11/03 Javascript

用js脚本控制asp.net下treeview的NodeCheck的实现代码

2010/03/02 Javascript

javascript 二维数组的实现与应用

2010/03/16 Javascript

禁止js文件缓存的代码

2010/04/09 Javascript

分享8款优秀的 jQuery 加载动画和进度条插件

2012/10/24 Javascript

用JavaScript修改CSS属性的代码

2013/05/06 Javascript

JavaScript自定义事件介绍

2013/08/29 Javascript

JS中操作JSON总结

2020/12/06 Javascript

JavaScript判断FileUpload控件上传文件类型

2015/09/28 Javascript

深入浅析JavaScript中的arguments对象(强力推荐)

2016/06/03 Javascript

Node.js 文件夹目录结构创建实例代码

2016/07/08 Javascript

基于jQuery的select下拉框选择触发事件实例分析

2016/11/18 Javascript

微信小程序侧滑删除（左滑删除）

2017/05/23 Javascript

vue+elementUi图片上传组件使用详解

2019/08/20 Javascript

[08:54]DOTA2-DPC中国联赛正赛 Aster vs LBZS 选手采访

2021/03/11 DOTA

Python对小数进行除法运算的正确方法示例

2014/08/25 Python

python二维列表一维列表的互相转换实例

2018/07/02 Python

使用pytorch进行图像的顺序读取方法

2018/07/27 Python

python3.4+pycharm 环境安装及使用方法

2019/06/13 Python

python 爬虫请求模块requests详解

2020/12/04 Python

ALEX AND ANI：手镯，项链，耳环和更多

2017/04/20 全球购物

历史专业毕业生的自我鉴定

2013/11/15 职场文书

前台接待岗位职责

2013/12/03 职场文书

网络信息安全承诺书

2014/03/26 职场文书

关于长城的导游词

2015/01/30 职场文书

2015年父亲节活动总结

2015/02/12 职场文书

毕业生爱心捐书倡议书

2015/04/27 职场文书

2016年校园重阳节广播稿

2015/12/18 职场文书

浅谈Golang 嵌套 interface 的赋值问题

2021/04/29 Golang

解决Pytorch修改预训练模型时遇到key不匹配的情况

2021/06/05 Python

教你使用RustDesk 搭建一个自己的远程桌面中继服务器

2022/08/14 Servers