编程 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实现DIV圆角效果完整代码

Oct 10 HTML / CSS

纯css3实现的竖形无限级导航

Dec 10 HTML / CSS

详解CSS3的图层阴影和文字阴影效果使用

Jun 09 HTML / CSS

用CSS3打造HTML5的Logo(实现代码)

Jun 16 HTML / CSS

详解CSS3 rem(设置字体大小) 教程

Nov 21 HTML / CSS

CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解

Jun 01 HTML / CSS

HTML5 Canvas鼠标与键盘事件demo示例

Jul 04 HTML / CSS

html5 css3网站菜单实现代码

Dec 23 HTML / CSS

在HTML5中使用MathML数学公式的简单讲解

Feb 19 HTML / CSS

HTML5本地存储和本地数据库实例详解

Sep 05 HTML / CSS

5分钟实现Canvas鼠标跟随动画背景

Nov 18 HTML / CSS

前后端结合实现amazeUI分页效果

Aug 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

set_exception_handler函数在ThinkPHP中的用法

2014/10/31 PHP

php批量添加数据与批量更新数据的实现方法

2014/12/16 PHP

windows下的WAMP环境搭建图文教程(推荐)

2017/07/27 PHP

PHP中cookie知识点学习

2018/05/06 PHP

Laravel框架模板继承操作示例

2018/06/11 PHP

地址栏上的一段语句，改变页面的风格。（教程）

2008/04/02 Javascript

jquery实现的鼠标下拉滚动置顶效果

2014/07/24 Javascript

jQuery根据用户电脑是mac还是pc加载对应样式的方法

2015/06/26 Javascript

JS获取下拉框显示值和判断单选按钮的方法

2015/07/09 Javascript

jQuery点击其他地方时菜单消失的实现方法

2016/04/22 Javascript

JS定时器使用,定时定点,固定时刻,循环执行详解

2016/05/31 Javascript

jQuery获取attr()与prop()属性值的方法及区别介绍

2016/07/06 Javascript

js实现消息滚动效果

2017/01/18 Javascript

gulp解决跨域的配置文件问题

2017/06/08 Javascript

jquery easyui如何实现格式化列

2017/07/30 jQuery

JavaScript 对引擎、运行时、调用堆栈的概述理解

2018/10/22 Javascript

浅析vue 函数配置项watch及函数 $watch 源码分享

2018/11/22 Javascript

微信小程序图表插件wx-charts用法实例详解

2019/05/20 Javascript

Vue实现点击显示不同图片的效果

2019/08/10 Javascript

layer弹出层自适应高度,垂直水平居中的实现

2019/09/16 Javascript

解决Echarts 显示隐藏后宽度高度变小的问题

2020/07/19 Javascript

[10:34]DOTA2上海特级锦标赛全纪录

2016/03/25 DOTA

[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2

2018/06/03 DOTA

精确查找PHP WEBSHELL木马的方法(1)

2011/04/12 Python

通过Python 接口使用OpenCV的方法

2018/04/02 Python

pytorch 实现将自己的图片数据处理成可以训练的图片类型

2020/01/08 Python

Python生成器generator原理及用法解析

2020/07/20 Python

用html5实现语音搜索框的方法

2014/03/18 HTML / CSS

Doyoueven官网：澳大利亚健身服饰和配饰品牌

2019/03/24 全球购物

美国知名眼镜网站：Target Optical

2020/04/04 全球购物

乌克兰设计师和品牌的服装：Love&Live

2020/04/14 全球购物

信息科学与技术专业求职信范文

2014/02/20 职场文书

可口可乐广告词

2014/03/20 职场文书

谢师宴家长致辞

2015/07/27 职场文书

golang switch语句的灵活写法介绍

2021/05/06 Golang

windows11选中自动复制怎么开启? Win11自动复制所选内容的方法

2022/07/23 数码科技