编程 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实现粒子旋转伸缩加载动画

Apr 22 HTML / CSS

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

Jul 20 HTML / CSS

纯CSS3实现绘制各种图形实现代码详细整理

Dec 26 HTML / CSS

细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果

Jul 21 HTML / CSS

利用CSS3实现圆角的outline效果的教程

Jun 05 HTML / CSS

CSS3绘制圆角矩形的简单示例

Sep 28 HTML / CSS

HTML5拖放功能_动力节点Java学院整理

Jul 13 HTML / CSS

突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述

Jan 31 HTML / CSS

html5定位获取当前位置并在百度地图上显示

Aug 22 HTML / CSS

使用数据结构给女朋友写个Html5走迷宫游戏

Nov 26 HTML / CSS

css3中transform属性实现的4种功能

Aug 07 HTML / CSS

基于HTML十秒做出淘宝页面

Oct 24 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中长文章分页显示实现代码

2012/09/29 PHP

解析php类的注册与自动加载

2013/07/05 PHP

ThinkPHP实现跨模块调用操作方法概述

2014/06/20 PHP

php生成高清缩略图实例详解

2015/12/07 PHP

解决php扩展安装不生效问题

2019/10/25 PHP

关于this和self的使用说明

2010/08/01 Javascript

JS实现多物体缓冲运动实例代码

2013/11/29 Javascript

打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)

2014/10/11 Javascript

jQuery菜单插件superfish使用指南

2015/04/21 Javascript

jquery特效点击展示与隐藏全文

2015/12/09 Javascript

分享我对JS插件开发的一些感想和心得

2016/02/04 Javascript

checkbox批量选中,获取选中项的值的简单实例

2016/06/28 Javascript

div实现自适应高度的textarea实现angular双向绑定

2017/01/08 Javascript

详解Angular中实现自定义组件的双向绑定的两种方法

2018/11/23 Javascript

JS实现随机生成10个手机号的方法示例

2018/12/07 Javascript

微信小程序实现拖拽功能

2019/09/26 Javascript

vue iview的菜单组件Mune 点击不高亮的解决方案

2019/11/01 Javascript

[43:35]TI4 循环赛第二日Liquid vs Fnatic

2014/07/11 DOTA

Python写的一个定时重跑获取数据库数据

2016/12/28 Python

在Python 的线程中运行协程的方法

2020/02/24 Python

Python多线程通信queue队列用法实例分析

2020/03/24 Python

Pandas之read_csv()读取文件跳过报错行的解决

2020/04/21 Python

Python requests.post方法中data与json参数区别详解

2020/04/30 Python

英国票务网站：Ticketmaster英国

2018/08/27 全球购物

Expedia西班牙：预订酒店、机票、旅行和廉价度假套餐

2019/04/10 全球购物

weblogic面试题

2016/03/07 面试题

项目经理聘任书

2014/03/29 职场文书

派出所正风肃纪剖析材料

2014/10/10 职场文书

房地产公司工程部经理岗位职责

2015/04/09 职场文书

地雷战观后感

2015/06/09 职场文书

2016年小学党支部创先争优活动总结

2016/04/05 职场文书

七年级作文之冬景

2019/11/07 职场文书

《卧薪尝胆》读后感3篇

2019/12/26 职场文书

MySQL如何使备份得数据保持一致

2022/05/02 MySQL

Java版单机五子棋

2022/05/04 Java/Android

Android开发EditText禁止输入监听及InputFilter字符过滤

2022/06/10 Java/Android