编程 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教程(10):CSS3 HSL声明设置颜色

Apr 02 HTML / CSS

CSS3感应鼠标的背景闪烁和图片缩放动画效果

May 14 HTML / CSS

一款纯css3实现的颜色渐变按钮的代码教程

Nov 12 HTML / CSS

纯CSS3实现的阴影效果

Dec 24 HTML / CSS

用CSS3实现无限循环的无缝滚动的示例代码

Nov 01 HTML / CSS

css3实现冲击波效果的示例代码

Jan 11 HTML / CSS

前端canvas动画如何转成mp4视频的方法

Jun 17 HTML / CSS

HTML5 Canvas的性能提高技巧经验分享

Jul 02 HTML / CSS

HTML5注册表单的自动聚焦与占位文本示例代码

Jul 19 HTML / CSS

解决Firefox下不支持outerHTML问题代码分享

Jun 04 HTML / CSS

HTML5触摸事件演化tap事件介绍

Mar 25 HTML / CSS

Html5移动端网页端适配(js+rem)

Feb 03 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调用Google translate_tts api实现代码

2013/08/07 PHP

php接口和抽象类使用示例详解

2014/03/02 PHP

php根据某字段对多维数组进行排序的方法

2015/03/07 PHP

PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF

2016/02/19 PHP

JavaScript 事件记录使用说明

2009/10/20 Javascript

jquery中ajax学习笔记一

2011/10/16 Javascript

js获取元素到文档区域document的(横向、纵向)坐标的两种方法

2013/05/17 Javascript

BootStrap和jQuery相结合实现可编辑表格

2016/04/21 Javascript

JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

2016/11/30 Javascript

详解Vue.js——60分钟组件快速入门（上篇）

2016/12/05 Javascript

详解vue2.0组件通信各种情况总结与实例分析

2017/03/22 Javascript

vue实现移动端图片裁剪上传功能

2020/08/18 Javascript

使用JS实现图片轮播的实例(前后首尾相接)

2017/09/21 Javascript

JavaScript实现单例模式实例分享

2017/12/22 Javascript

vue多次循环操作示例

2019/02/08 Javascript

微信小程序与webview交互实现支付功能

2019/06/07 Javascript

Vue实现菜单切换功能

2020/11/08 Javascript

[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽

2014/07/15 DOTA

深入理解Django的自定义过滤器

2017/10/17 Python

Python 12306抢火车票脚本

2018/02/07 Python

Python matplotlib绘图可视化知识点整理(小结)

2018/03/16 Python

pygame游戏之旅如何制作游戏障碍

2018/11/20 Python

Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能

2018/11/23 Python

python实现身份证实名认证的方法实例

2019/11/08 Python

Python写捕鱼达人的游戏实现

2020/03/31 Python

日本钓鱼渔具和户外用品网上商店：naturum

2016/08/07 全球购物

德国Discount-Apotheke中文官网：DC德式康线上药房

2020/02/18 全球购物

新西兰购物网站：TheMarket NZ

2020/09/19 全球购物

爱情保证书范文

2014/02/01 职场文书

大学生活动策划方案

2014/02/10 职场文书

副董事长岗位职责

2014/04/02 职场文书

大一新生学期自我评价

2014/04/09 职场文书

高三英语复习计划

2015/01/19 职场文书

运动会广播稿300字

2015/08/19 职场文书

SQL SERVER实现连接与合并查询

2022/02/24 SQL Server

Spring boot实现上传文件到本地服务器

2022/08/14 Java/Android