编程 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使用技巧5个

Apr 02 HTML / CSS

CSS3 @font-face属性使用指南

Dec 12 HTML / CSS

轻松掌握CSS3中的字体大小单位rem的使用方法

May 24 HTML / CSS

使用CSS3的ruby-position固定注音位置的用法示例

Jul 05 HTML / CSS

CSS3打造磨砂玻璃背景效果

Sep 28 HTML / CSS

CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码

Feb 24 HTML / CSS

借助HTML5 Canvas来绘制三角形和矩形等多边形的方法

Mar 14 HTML / CSS

H5仿微信界面教程(一)

Jul 05 HTML / CSS

浅谈html5 响应式布局

Dec 24 HTML / CSS

一些常用的HTML5模式(pattern) 总结

Jul 14 HTML / CSS

详解HTML5中的picture元素响应式处理图片

Jan 03 HTML / CSS

微信小程序canvas实现水平、垂直居中效果

Feb 05 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

基于HTTP长连接的"服务器推"技术的php 简易聊天室

2009/10/31 PHP

PHP全概率运算函数(优化版) Webgame开发必备

2011/07/04 PHP

php实现计数器方法小结

2015/01/05 PHP

Django中的cookie与session操作实例代码

2017/08/17 PHP

javascript 特性检测并非浏览器检测

2010/01/15 Javascript

如何获取JQUERY AJAX返回的JSON结果集实现代码

2012/12/10 Javascript

js如何获取file控件的完整路径具体实现代码

2013/05/15 Javascript

javascript贪吃蛇完整版(源码)

2013/12/09 Javascript

jquery图片切换实例分析

2015/04/15 Javascript

在Mac OS下使用Node.js的简单教程

2015/06/24 Javascript

jquery实现的仿天猫侧导航tab切换效果

2015/08/24 Javascript

Node.js中防止错误导致的进程阻塞的方法

2016/08/11 Javascript

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

2017/02/28 Javascript

vue2.0获取自定义属性的值

2017/03/28 Javascript

jQuery使用zTree插件实现可拖拽的树示例

2017/09/23 jQuery

JS脚本实现网页自动秒杀点击

2018/01/11 Javascript

element 结合vue 在表单验证时有值却提示错误的解决办法

2018/01/22 Javascript

JS实现进度条动态加载特效

2020/03/25 Javascript

angular共享依赖的解决方案分享

2020/10/15 Javascript

Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例

2018/07/18 Python

浅析Python3中的对象垃圾收集机制

2019/06/06 Python

Django 路由控制的实现

2019/07/17 Python

Python学习笔记之函数的定义和作用域实例详解

2019/08/13 Python

原来我一直安装 Python 库的姿势都不对呀

2019/11/11 Python

python使用beautifulsoup4爬取酷狗音乐代码实例

2019/12/04 Python

俄罗斯美容和健康网上商店：Созвездие Красоты

2019/07/23 全球购物

黑猩猩商店：The Chimp Store

2020/02/12 全球购物

COSETTE官网：奢华，每天

2020/03/22 全球购物

毕业自我评价范文

2013/11/17 职场文书

刘胡兰的英雄事迹材料

2014/02/11 职场文书

好的旅游活动方案

2014/08/19 职场文书

公司内部升职自荐信

2015/03/27 职场文书

2015社区六五普法工作总结

2015/04/21 职场文书

观后感的写法

2015/06/19 职场文书

关于幸福的感言

2015/08/03 职场文书

python利用pandas分析学生期末成绩实例代码

2021/07/09 Python