编程 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 弹性布局快速入门

Jun 06 HTML / CSS

CSS3制作炫酷的下拉菜单及弹起式选单的实例分享

May 17 HTML / CSS

移动端Web页面的CSS3 flex布局快速上手指南

May 31 HTML / CSS

CSS3实现图片抽屉式效果的示例代码

Nov 06 HTML / CSS

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

Dec 03 HTML / CSS

HTML5新增的Css选择器、伪类介绍

Aug 07 HTML / CSS

HTML5 canvas标签实现刮刮卡效果

Apr 24 HTML / CSS

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

Jan 12 HTML / CSS

HTML5 3D书本翻页动画的实现示例

Aug 28 HTML / CSS

HTML5播放实现rtmp流直播

Jun 16 HTML / CSS

canvas小画板之平滑曲线的实现

Aug 12 HTML / CSS

bootstrapv4轮播图去除两侧阴影及线框的方法

Feb 15 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下将图片以二进制存入mysql数据库中并显示的实现代码

2010/05/27 PHP

Linux编译升级php的详细方法

2013/11/04 PHP

PhpStorm terminal无法输入命令的解决方法

2016/10/09 PHP

laravel框架路由分组，中间件，命名空间，子域名，路由前缀实例分析

2020/02/18 PHP

js 获取服务器控件值的代码

2010/03/05 Javascript

为你的网站增加亮点的9款jQuery插件推荐

2011/05/03 Javascript

javascript克隆对象深度介绍

2012/11/20 Javascript

用javascript判断IE版本号简单实用且向后兼容

2013/09/11 Javascript

jquery easyui 对于开始时间小于结束时间的判断示例

2014/03/22 Javascript

jquery使用正则表达式验证email地址的方法

2015/01/22 Javascript

浅谈JavaScript Math和Number对象

2015/01/26 Javascript

js给网页加上背景音乐及选择音效的方法

2015/03/03 Javascript

jQuery UI插件自定义confirm确认框的方法

2015/03/20 Javascript

在ASP.NET MVC项目中使用RequireJS库的用法示例

2016/02/15 Javascript

jQuery设置Cookie及删除Cookie实例分析

2016/04/15 Javascript

jQuery异步提交表单实例

2017/05/30 jQuery

使用json-server简单完成CRUD模拟后台数据的方法

2018/07/12 Javascript

vue 中引用gojs绘制E-R图的方法示例

2018/08/24 Javascript

vue-auto-focus: 控制自动聚焦行为的 vue 指令方法

2018/08/25 Javascript

NodeJS搭建HTTP服务器的实现步骤

2018/10/12 NodeJs

jQuery实现简单聊天室

2020/02/08 jQuery

[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan

2014/07/15 DOTA

[01:02]DOTA2上海特锦赛SHOWOPEN

2016/03/25 DOTA

python插入排序算法的实现代码

2013/11/21 Python

Python提取频域特征知识点浅析

2019/03/04 Python

为什么说Python可以实现所有的算法

2019/10/04 Python

python带参数打包exe及调用方式

2019/12/21 Python

python实现高斯投影正反算方式

2020/01/17 Python

Python bisect模块原理及常见实例

2020/06/17 Python

Manuka Doctor英国官网：真正的麦卢卡蜂蜜和护肤品

2018/10/26 全球购物

运动会广播稿150字

2014/02/19 职场文书

运动会口号大全

2014/06/07 职场文书

2015年社区民政工作总结

2015/04/21 职场文书

2015初中政教处工作总结

2015/07/21 职场文书

导游词之襄阳古城

2019/09/27 职场文书

Windows下载并安装MySQL8.0.x 版本的完整教程

2022/04/10 MySQL