编程 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特性绘制简易版围棋效果

Sep 28 HTML / CSS

一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9

Nov 18 HTML / CSS

详解CSS3中强大的filter(滤镜)属性

Jun 29 HTML / CSS

浅谈CSS3 动画卡顿解决方案

Jan 02 HTML / CSS

突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述

Jan 31 HTML / CSS

用HTML5制作一个简单的桌球游戏的教程

May 12 HTML / CSS

巧用HTML5给按钮背景设计不同的动画简单实例

Aug 09 HTML / CSS

mui几种页面跳转方式对比总结概括

Aug 18 HTML / CSS

用canvas画心电图的示例代码

Sep 10 HTML / CSS

Html5 页面适配iPhoneX(就是那么简单)

Sep 05 HTML / CSS

Html5监听手机摇一摇事件的实现

Nov 07 HTML / CSS

html粘性页脚的具体使用

Jan 18 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

CodeIgniter启用缓存和清除缓存的方法

2014/06/12 PHP

PHP实现mysqli批量执行多条语句的方法示例

2017/07/22 PHP

PHP中散列密码的安全性分析

2019/07/26 PHP

laravel 验证错误信息到 blade模板的方法

2019/09/29 PHP

对联广告js flash激活

2006/10/19 Javascript

JS 用6N±1法求素数实例教程

2009/10/20 Javascript

一个JQuery操作Table的代码分享

2012/03/30 Javascript

JQUERY 设置SELECT选中项代码

2014/02/07 Javascript

node.js中的dns.getServers方法使用说明

2014/12/08 Javascript

jQuery旋转木马式幻灯片轮播特效

2015/12/04 Javascript

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

2016/07/08 Javascript

Angularjs实现带查找筛选功能的select下拉框示例代码

2016/10/04 Javascript

javascript入门之string对象【新手必看】

2016/11/22 Javascript

Angularjs中的ui-bootstrap的使用教程

2017/02/19 Javascript

详解vue模拟加载更多功能（数据追加）

2017/06/23 Javascript

微信小程序对接七牛云存储的方法

2017/07/30 Javascript

浅谈Vue.nextTick 的实现方法

2017/10/25 Javascript

JavaScript 中使用 Generator的方法

2017/12/29 Javascript

改变vue请求过来的数据中的某一项值的方法(详解)

2018/03/08 Javascript

详解vue-cli项目中怎么使用mock数据

2018/05/29 Javascript

微信小程序实现循环动画效果

2018/07/16 Javascript

vue插件mescroll.js实现移动端上拉加载和下拉刷新

2019/03/07 Javascript

this.$toast() 了解一下？

2019/04/18 Javascript

Vue实现PC端靠边悬浮球的代码

2020/05/09 Javascript

Python利用字典破解WIFI密码的方法

2019/02/27 Python

Python如何通过Flask-Mail发送电子邮件

2020/01/29 Python

python时间与Unix时间戳相互转换方法详解

2020/02/13 Python

详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)

2020/04/01 Python

Java爬虫技术框架之Heritrix框架详解

2020/07/22 Python

Django-simple-captcha验证码包使用方法详解

2020/11/28 Python

html5利用canvas绘画二级树形结构图的示例

2017/09/27 HTML / CSS

用canvas画心电图的示例代码

2018/09/10 HTML / CSS

英国第一独立滑雪板商店：The Snowboard Asylum

2020/01/16 全球购物

大学生学业生涯规划

2014/01/05 职场文书

岗位明星事迹材料

2014/05/18 职场文书

「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开

2022/03/22 日漫