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.函数嵌套函数 ; ...
随机推荐
- DataTable 数字排序问题
问题:DataTable 的默认排序功能是按字符来排的.在js里,把数字当字符串来排序会很大的问题,例如:"2" > "11" 返回的是 true 解决办 ...
- MySQL5.7修改wait_timeout参数
参考:https://blog.csdn.net/ivory_town1/article/details/77702357 1.修改参数配置文件 vi /etc/my.cnf [mysqld] wai ...
- rxjs debounceTime减少搜索的频率
debounceTime用来降低事件的触发频率 ,接收以毫秒为单位的参数 它所做的操作是,在一定时间范围内不管产生了多少事件,它只放第一个过去,剩下的都将舍弃 html: <div class= ...
- “无法从节点xx检索exectask的版本” 原因分析
客户有一套部署在Window 2008 R2 sp环境下的12.1.0.2 RAC环境,该RAC基于策略管理.因为业务需要,现在需要更换部分设备——踢出两台2路的服务器(节点名称分别为racnode2 ...
- 在ensp上配置基于接口地址池的DHCP
原理 实验模拟 实验拓扑 相关参数 开启dhcp服务 开启接口的dhcp服务功能,指定从接口地址池分配(接口1一样) 配置接口DHCP服务租期(租期默认是一天) 设置保留地址 设置dns 我们在pc1 ...
- SQlL Server ----- 通过年月进行查询
websit 中的代码. 不修改 对控件进行修改,展示年月 WdatePicker({ dateFmt: 'yyyy-MM', isShowToday: false, isShowClear: fa ...
- Docker下打包FastDFS镜像以及上传遇到的问题
官方地址:https://github.com/happyfish100/fastdfs 一.先下载个包,然后解压(自己找个目录下载即可) [root@localhost soft]# wget ht ...
- 22 Oracle数据库基础入门
1.Oracle数据库的介绍 ORACLE 数据库系统是美国ORACLE 公司(甲骨文)提供的以分布式数据库为核心的一组软件产品,是目前最流行的客户/服务器(CLIENT/SERVER)或 B/S 体 ...
- [转帖]Linux超级用户root口令忘记怎么办?
Linux超级用户root口令忘记怎么办? 2010-05-10 12:15:00 monkey_d_meng 阅读数 5535 收藏 更多 分类专栏: Linux 版权声明:本文为博主原创文章 ...
- Kubernetes集群中Jmeter对公司演示的压力测试
6分钟阅读 背景 压力测试是评估Web应用程序性能的有效方法.此外,越来越多的Web应用程序被分解为几个微服务,每个微服务的性能可能会有所不同,因为有些是计算密集型的,而有些是IO密集型的. 基于微服 ...