编程 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 相关文章推荐

让IE6、IE7、IE8支持CSS3的脚本

Jul 20 HTML / CSS

10个很棒的 CSS3 开发工具推荐

May 16 HTML / CSS

css3一款3D字体带阴影效果的实现步骤

Mar 20 HTML / CSS

一款纯css3实现简单的checkbox复选框和radio单选框

Nov 05 HTML / CSS

CSS3 display知识详解

Nov 25 HTML / CSS

css3中less实现文字长阴影(long shadow)

Apr 24 HTML / CSS

html5指南-6.如何创建离线web应用程序实现离线访问

Jan 07 HTML / CSS

Html5实现如何在两个div元素之间拖放图像

Mar 29 HTML / CSS

html5开发三八女王节表白神器

Mar 07 HTML / CSS

Html5跳转到APP指定页面的实现

Jan 14 HTML / CSS

在html页面中取得session中的值的方法

Aug 11 HTML / CSS

css 中多种边框的实现小窍门

Apr 07 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 注册时输入信息验证器的实现详解

2013/07/05 PHP

PHP获取youku视频真实flv文件地址的方法

2014/12/23 PHP

PHP和C#可共用的可逆加密算法详解

2015/10/26 PHP

PHP多维数组转一维数组的简单实现方法

2015/12/23 PHP

thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法

2016/09/30 PHP

PHP编程获取图片的主色调的方法【基于Imagick扩展】

2017/08/02 PHP

php获取ajax的headers方法与内容实例

2017/12/27 PHP

thinkphp整合系列之极验滑动验证码geetest功能

2019/06/18 PHP

PHP商品秒杀问题解决方案实例详解【mysql与redis】

2019/07/22 PHP

JScript的条件编译

2007/05/29 Javascript

js控制框架刷新

2008/08/01 Javascript

JQuery教学之性能优化

2014/05/14 Javascript

PassWord输入框代码分享

2016/06/07 Javascript

js传值后台中文出现乱码的解决方法

2016/06/30 Javascript

JS中使用FormData上传文件、图片的方法

2016/08/07 Javascript

JavaScript利用闭包实现模块化

2017/01/13 Javascript

easyui-datagrid开发实践(总结)

2017/08/02 Javascript

vue组件从开发到发布的实现步骤

2018/11/11 Javascript

微信小程序实现卡片左右滑动效果的示例代码

2019/05/01 Javascript

茶余饭后聊聊Vue3.0响应式数据那些事儿

2019/10/30 Javascript

JsonServer安装及启动过程图解

2020/02/28 Javascript

微信小程序将页面按钮悬浮固定在底部的实现代码

2020/10/29 Javascript

浅谈Python2.6和Python3.0中八进制数字表示的区别

2017/04/28 Python

基于pandas数据样本行列选取的方法

2018/04/20 Python

python requests证书问题解决

2019/09/05 Python

Python利用Pillow(PIL)库实现验证码图片的全过程

2020/10/04 Python

python 基于opencv 绘制图像轮廓

2020/12/11 Python

详解CSS3选择器:nth-child和:nth-of-type之间的差异

2017/09/18 HTML / CSS

全球速卖通巴西站点：Aliexpress巴西

2016/08/24 全球购物

教师纪念9.18事件演讲稿范文

2014/09/14 职场文书

2014年学生工作总结

2014/11/20 职场文书

2015年个人现实表现材料

2014/12/10 职场文书

秦兵马俑导游词

2015/02/02 职场文书

2015年社区科普工作总结

2015/05/13 职场文书

区域销售大会开幕词

2016/03/04 职场文书

Redis实现订单自动过期功能的示例代码

2021/05/08 Redis