编程 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 07 HTML / CSS

css3.0新属性效果在ie下的解决方案

May 10 HTML / CSS

详解CSS3中@media的实际使用

Aug 04 HTML / CSS

css3实现圆锥渐变conic-gradient效果

Feb 12 HTML / CSS

HTML5 本地存储实现购物车功能

Sep 07 HTML / CSS

开发人员所需要知道的HTML5性能分析面面观

Jul 05 HTML / CSS

html5 input属性使用示例

Jun 28 HTML / CSS

HTML5 创建canvas元素示例代码

Jun 04 HTML / CSS

Canvas绘制浮动球效果的示例

Dec 29 HTML / CSS

详解如何获取localStorage最大存储大小的方法

May 21 HTML / CSS

CSS 还能这样玩？奇思妙想渐变的艺术

Apr 27 HTML / CSS

background-position百分比原理详解

May 08 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

音乐朗读剧《MARS RED》2021年TV动画化决定！

2020/03/06 日漫

PHP has encountered an Access Violation at 7C94BD02解决方法

2009/08/24 PHP

PHP抽象类介绍

2012/06/13 PHP

PHP获取数组中某元素的位置及array_keys函数应用

2013/01/29 PHP

实现在同一方法中获取当前方法中新赋值的session值解决方法

2014/06/26 PHP

ThinkPHP模板比较标签用法详解

2014/06/30 PHP

PHP中单引号与双引号的区别分析

2014/08/19 PHP

ThinkPHP5 的简单搭建和使用详解

2018/11/15 PHP

使用composer 安装 laravel框架的方法图文详解

2019/08/02 PHP

学习ExtJS（一）之基础前提

2009/10/07 Javascript

JavaScript this调用规则说明

2010/03/08 Javascript

Javascript高级技巧分享

2014/02/25 Javascript

addEventListener 的用法示例介绍

2014/05/07 Javascript

js显示文本框提示文字的方法

2015/05/07 Javascript

纯JS实现本地图片预览的方法

2015/07/31 Javascript

jquery实现滑屏大图定时收缩为小banner图片的广告代码

2015/09/02 Javascript

Angular JS 生成动态二维码的方法

2017/02/23 Javascript

nodejs入门教程四：URL相关模块用法分析

2017/04/24 NodeJs

详解Angular 4.x NgIf 的用法

2017/05/22 Javascript

基于vue组件实现猜数字游戏

2020/05/28 Javascript

Javascript实现简易天数计算器

2020/05/18 Javascript

使用Python对Access读写操作

2017/03/30 Python

对python的文件内注释 help注释方法

2018/05/23 Python

详解Python sys.argv使用方法

2019/05/10 Python

Django如何将URL映射到视图

2019/07/29 Python

python处理自动化任务之同时批量修改word里面的内容的方法

2019/08/23 Python

python生成器/yield协程/gevent写简单的图片下载器功能示例

2019/10/28 Python

基于python实现音乐播放器代码实例

2020/07/01 Python

波兰品牌内衣及泳装网上商店：Astratex.pl

2017/02/03 全球购物

SISLEY希思黎官方旗舰店：享誉全球的奢华植物美容品牌

2018/04/25 全球购物

十岁生日家长答谢词

2014/01/17 职场文书

美丽家庭事迹材料

2014/05/03 职场文书

大学新生军训自我鉴定

2014/09/18 职场文书

技术股东合作协议书

2014/12/02 职场文书

优秀员工推荐材料

2014/12/20 职场文书

Go语言实现Base64、Base58编码与解码

2021/07/26 Golang