编程 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 特效范例整理

Aug 22 HTML / CSS

CSS3打造磨砂玻璃背景效果

Sep 28 HTML / CSS

Css3新特性应用之视觉效果实例

Dec 12 HTML / CSS

css3翻牌翻数字的示例代码

Feb 07 HTML / CSS

HTML5的文档结构和新增标签完全解析

Apr 21 HTML / CSS

canvas烟花特效锦集

Jan 17 HTML / CSS

HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述

Jan 30 HTML / CSS

深入理解HTML的FormData对象

May 17 HTML / CSS

浅谈html5之sse服务器发送事件EventSource介绍

Aug 28 HTML / CSS

基于HTML5+Webkit实现树叶飘落动画

Dec 28 HTML / CSS

html5移动端自适应布局的实现

Apr 15 HTML / CSS

一个基于canvas的移动端图片编辑器的实现

Oct 28 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

基于Laravel实现的用户动态模块开发

2017/09/21 PHP

php中如何执行linux命令详解

2018/11/06 PHP

Javascript----文件操作

2007/01/18 Javascript

Extjs Ajax 乱码问题解决方案

2009/04/15 Javascript

网络图片延迟加载实现代码超越jquery控件

2010/03/27 Javascript

基于jquery的复制网页内容到WORD的实现代码

2011/02/16 Javascript

JS小功能(列表页面隔行变色)简单实现

2013/11/28 Javascript

jQuery.holdReady()方法用法实例

2014/12/27 Javascript

浅谈Sublime Text 3运行JavaScript控制台

2016/06/06 Javascript

第一次动手实现bootstrap table分页效果

2016/09/22 Javascript

jQuery EasyUI Accordion可伸缩面板组件使用详解

2017/02/28 Javascript

vue elementui 实现搜索栏公共组件封装的实例代码

2020/01/20 Javascript

vue 数据遍历筛选过滤排序的应用操作

2020/11/17 Javascript

[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局

2016/02/28 DOTA

[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16

2019/08/18 DOTA

初步介绍Python中的pydoc模块和distutils模块

2015/04/13 Python

Python使用微信接入图灵机器人过程解析

2019/11/04 Python

centos+nginx+uwsgi+Django实现IP+port访问服务器

2019/11/15 Python

python有序查找算法二分法实例解析

2020/02/18 Python

python使用Geany编辑器配置方法

2020/02/21 Python

Python3.6 中的pyinstaller安装和使用教程

2020/03/16 Python

Python实现自动装机功能案例分析

2020/10/22 Python

纯css3制作网站后台管理面板

2014/12/30 HTML / CSS

利用HTML5 Canvas制作一个简单的打飞机游戏

2015/05/11 HTML / CSS

Net Remoting把服务器端激活两种模式

2014/01/22 面试题

css animation配合SVG制作能量流动效果

2021/03/24 HTML / CSS

八年级物理教学反思

2014/01/19 职场文书

平面设计专业大学生职业规划书

2014/03/12 职场文书

培训协议书范本

2014/04/22 职场文书

法制演讲稿

2014/09/10 职场文书

工会2014法制宣传日活动总结

2014/11/01 职场文书

小学教师工作总结2015

2015/04/07 职场文书

单位接收证明格式

2015/06/18 职场文书

素质拓展训练感想

2015/08/07 职场文书

Python matplotlib安装以及实现简单曲线的绘制

2022/04/26 Python

讨论nginx location 顺序问题

2022/05/30 Servers