css3卡片阴影效果
1.css3阴影用到的知识点：阴影box-shadow和插入：after before
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box case-content">
<h1>卡片阴影效果</h1>
</div>
</body>
</html>
CSS部分：
<style type="text/css">
.box {
width: 70%;
height: 200px;
margin: 50px auto;
background-color: #fff;
}
.box h1 {
font-size: 20px;
line-height: 200px;
text-align: center;
}
.case-content {
position: relative;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
-o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
} .case-content:before ,.case-content:after{
z-index: -1;
content: "";
background-color: #foo;
position: absolute;
top: 50%;
bottom: 0;
left: 10px;
right: 10px;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
box-shadow: 0 0 20px rgba(0,0,0,0.8);
-o-box-shadow:0 0 20px rgba(0,0,0,0.8);
border-radius: 100px/10px;
}
备注：
1. css卡片阴影效果用到两个伪元素:after、before.
(1)、“伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后；
(2)、伪元素如果没有设置“content”属性，伪元素是无用的；
浏览器支持:before 和 :after 伪元素栈，像这样：
- Chrome 2+,
- Firefox 3.5+ (3.0 had partial support),
- Safari 1.3+,
- Opera 9.2+,
- IE8+ (with some minor bugs),
- 几乎所有的移动浏览器。
- 唯一真正的问题是没有获得支持的（不用奇怪）IE6和IE7。
2.inset用法:
(1)、inset是从元素侧边进行投影,但是只渲染盒子内部的,丢弃外部的阴影而已.
css3卡片阴影效果的更多相关文章
- css3边框阴影效果
下面来说下css3阴影的语法: box-shadow:none | <shadow> [ , <shadow> ]* <shadow> = inset? & ...
- CSS3卡片旋转效果
HTML: <div id="rotate"> <div id="rotate_wrap"> <div id="fron ...
- css3 drop-shaow阴影效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- css3 边框阴影效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3 Box-shadow 阴影效果用法
一.基本用法: 二.内阴影用法: 三.阴影扩展长度值: box-shadow: 4rpx 4rpx 8rpx #aaa;
- css3 属性阴影效果--box-shadow,text-shadow
1.text-shadow:h-shadow v-shadow blur color; h-shadow:水平阴影的位置,可以是负值,正值向右,负值向左 v-shadow:水平阴影的位置,可以是负值, ...
- 11个超震撼的HTML5和纯CSS3动画源码
1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...
- PIE使IE浏览器支持CSS3属性（圆角、阴影、渐变）
http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...
- h5面试题集合
一.闭包的理解: 使用闭包主要是为了设计私有的方法和变量.闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露. 闭包三个特性: 1.函数嵌套函数 ; ...
随机推荐
- RHEL 7.6 设置时间同步ntp
1.服务端和客户端 安装包,检查状态 yum install ntp ntpdate -y systemctl start ntpd systemctl status ntpd 2.服务端 修改配置 ...
- html2canvas 将网页截图为图片，上传base64 到服务端
await html2canvas(getById("winyh"), { height:500, allowTaint: true, useCORS: true, }).then ...
- jenkins自动化视频地址
1.腾讯课堂的视频 http://www.ctnrs.com/study.html 我的课程所有列表 2.百度网盘里面的
- Component 'TABCTL32.OCX'错误
1.Component 'TABCTL32.OCX'错误的处理方法 错误:Component 'TABCTL32.OCX' or one of its dependencies not correct ...
- [转帖]Beyond compare4密钥
Beyond compare4密钥 https://blog.csdn.net/lemontree1945/article/details/92963423 学习一下 最近想破解水卡.... w4G- ...
- [转帖]浅谈分布式一致性与CAP/BASE/ACID理论
浅谈分布式一致性与CAP/BASE/ACID理论 https://www.cnblogs.com/zhang-qc/p/6783657.html ##转载请注明 CAP理论(98年秋提出,99年正式发 ...
- Kubernetes集群中Jmeter对公司演示的压力测试
6分钟阅读 背景 压力测试是评估Web应用程序性能的有效方法.此外,越来越多的Web应用程序被分解为几个微服务,每个微服务的性能可能会有所不同,因为有些是计算密集型的,而有些是IO密集型的. 基于微服 ...
- 0-python变量及基本数据类型
目录 1.变量2.字符串3.布尔类型4.整数5.浮点数6.日期 1.变量 1.1.变量的定义 - 类似于标签 1.2.变量的命名规则 - (强制)变量名只能包含数字.字母.下划线 - (强制)不能以数 ...
- 快速排序（Quick Sort）C语言
已知数组 src 如下: [5, 3, 7, 6, 4, 1, 0, 2, 9, 10, 8] 快速排序1 在数组 src[low, high] 中,取 src[low] 作为 关键字(key) . ...
- 74HC573锁存器应用（附英文手册）
锁存器(LATCH)概念 锁存器(Latch)是一种对脉冲电平敏感的存储单元电路,它们可以在特定输入脉冲电平作用下改变状态. 锁存,就是把信号暂存以维持某种电平状态. 锁存器作用: 缓存 完成高速的控 ...