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.函数嵌套函数 ; ...
随机推荐
- OpenShift 4.2 离线安装补充记录
OpenShift4.2详细安装参考同事王征的安装手册(感谢王征大师的研究和答疑解惑, 大坑文章都已经搞定了,我这里是一些小坑) https://github.com/wangzheng422/doc ...
- iOS - 浮点数去掉小数点之后的0,以0.5小数递增函数
NSMutableArray *arrNumber = [NSMutableArray array]; float a = -0.5; ) { a+=0.5; NSString *str = [sel ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器解决方案之多方式虚拟直播
EasyDSS流媒体解决方案之虚拟直播 虚拟直播相对于传统的实时直播的差别在于,实时的直播在于播放的是一个实时的直播流,而虚拟直播,可能适应范围更加的广.虚拟直播,不仅仅可以播放实时的视频直播流,也可 ...
- Ubuntu18.04LTS python3.6 cuda10.0 下安装低版本的pytorch
Ubuntu18.04LTS python3.6 cuda10.0 下安装低版本的pytorch,运行Hypergraph Neural Networks(HGNN) https://github.c ...
- Flask源码之:路由加载
路由加载整体思路: 1. 将 url = /index 和 methods = [GET,POST] 和 endpoint = "index"封装到Rule对象 2. 将Ru ...
- 全能中间件v19.5.7 正式版发布
v19.5.7 更新=========================1.新增 支持更多微信公众号API.2.优化 AccessToken 刷新机制.3.修复 微信公众号“消息加解密方式”为“安全模式 ...
- Go语言【学习】defer和逃逸分析
defer 什么是defer? defer是Go语言的一中用于注册延迟调用的机制,使得函数活语句可以再当前函数执行完毕后执行 为什么需要defer? Go语言提供的语法糖,减少资源泄漏的发生 如何使用 ...
- Go基础编程实践(五)—— 错误和日志
自定义错误类型 Go中可以使用errors.New()创建错误信息,也可以通过创建自定义错误类型来满足需求.error是一个接口类型,所有实现该接口的类型都可以当作一个错误类型. // error类型 ...
- (十一)pdf的构成之文件尾
件尾部(trailer)如何找到交叉引用表和其他特殊对象 属性: / Size [integer]:指定交叉引用表中的条目数(也计算更新部分中的对象).使用的数字不应是间接参考. / Prev [in ...
- 使用HttpClient调用接口
一,编写返回对象 public class HttpResult { // 响应的状态码 private int code; // 响应的响应体 private String body;get/set ...