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.函数嵌套函数 ; ...
随机推荐
- vue install 组件
import share from './index.vue' export default { install: (Vue) => { Vue.prototype.$share = (opti ...
- cube-ui按钮配合toast单例模式应用
<template> <div> <cube-button icon="cubeic-right" @click="goNext" ...
- sql server 2008 自动备份
身份验证:包含Windows身份验证和 SQL Server身份验证,此处选择Windows 身份验证; 选择[管理]-->[维护计划]-->[维护计划向导] 必须启用代理服务(启动模式请 ...
- IntelliJ IDEA(2018.3.5) 设置编码为utf-8编码
位置一: File->Settings->Editor->File Encodings 位置二: File->Other Settings->Default Sett ...
- js 强制换行及 单行文字溢出时出现省略号
/*强制换行*/.f-break {word-break:break-all; /*支持IE,chrome,FF不支持*/ word-wrap:break-word;/*支持IE,chrome,FF* ...
- [ARM-Linux开发]Linux open函数
Linux open函数 open 函数用于打开和创建文件.以下是 open 函数的简单描述 #include <fcntl.h> int open(const char *pathnam ...
- svg可视化制作工具
svg可视化制作工具直接ai里面用钢笔路径画好 然后右键建立复合路径 最后存储为svg即可 这样生成的svg就带path标签了
- python快速开始一-------常见的数据类型
前置条件:已经安装好python程序 常用的数据类型 Python常见的数据类型: 整数:就是我们数学里面的整数,比如3455,python目前支持最大的32bit或者64bit 长整数(long): ...
- 材质(Material)和几何体(Geometry)
1. 材质 一个材质结合一个几何体可以组成一个mesh对象.材质就像物体的皮肤,决定了几何体的外表.例如:皮肤定义了一个几何体看起来是否像金属.透明与否,或者显示为线框. 基本的材质如下: 1. ...
- 基于Keras搭建MLP
Keras是一套基于Tensorflow.Theano及CNTK后端的高层神经网络API,可以非常友好地支持快速实验,本文从零开始介绍了如何使用Keras搭建MLP并给出两个示例. 基于Ubuntu安 ...