<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>翘边阴影</title>
　　　　　　　　/*翘边阴影样式*/

		<style>

	　　　　.demo {

		    display: inline-block;

		    *display: inline;

		    width: 200px;

		    height: 248px;

		    margin: 20px;

		    background-color: #fff;

		    border: 1px solid #eee;

		    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;

		    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

		    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;

		    position: relative;

		    *zoom: 1;

}

/* 用伪类before和after在里面添加transform属性*/

.demo:before {

    -webkit-transform: skew(-15deg) rotate(-6deg);

    -moz-transform: skew(-15deg) rotate(-6deg);

    transform: skew(-15deg) rotate(-6deg);

    left: 15px;

}

.box:after {

    -webkit-transform: skew(15deg) rotate(6deg);

    -moz-transform: skew(15deg) rotate(6deg);

    transform: skew(15deg) rotate(6deg);

    right: 15px;

}

.demo:before, .box:after {

    width: 70%;

    height: 55%;

    content: ' ';

    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

    position: absolute;

    bottom: 10px;

    z-index: -1;

}

		</style>

	</head>

	<body>

		<div class="demo">

			<h3>翘边阴影-我的demo</h3>

		</div>

	</body>

</html>

效果图如下：

　　

关于C3翘边阴影的demo的更多相关文章

  1. CSS3实现图形曲线阴形和翘边阴影

    首先,来看看完成之后的效果图: 实现原理 ①曲线阴影实现: 多个阴影重叠,就是正常阴影+曲线阴影 正常情况下,有个矩形有正常的阴影,作为主投影,这时候再定义一个有一定弧度圆角的圆角矩形,然后放在正常矩 ...

  2. 转载---CSS3实现曲线阴影和翘边阴影

    预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...

  3. css3 曲线阴影，翘边阴影

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 【CSS3】---曲线阴影翘边阴影

    效果图 代码 index <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title& ...

  5. duilib 使用图片素材或者算法给窗体增加阴影（源码和demo）

    转载请说明原出处,谢谢:http://blog.csdn.net/zhuhongshu/article/details/42580877 之前我写的程序使用阴影时,一直是使用codeproject网站 ...

  6. CSS3知识点整理&&一些demo

    css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出         http://codepen ...

  7. CSS3--实现特殊阴影 (实例)

    学习来源:慕课网http://www.imooc.com/view/240 先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ HTML结构 <body> <div class=& ...

  8. CSS3 盒阴影（box-shadow）详解

    CSS3 的 box-shadow 有点类似于 text-shadow,只不过不同的是 text-shadow 是对象的文本设置阴影,而 box-shadow 是给对象实现图层阴影效果.本文我们搁下I ...

  9. CSS3 特效分解一

    先声明下,下面的特效不是我发明的,对CSS3的创造力还不够,只是看了别人demo的源码,一点一点分析出来的.整理出的笔记,分享给大家.因为源码是好,但是一头扎进去半天出不来. 首先看个登陆框,如下,相 ...

随机推荐

  1. JS倒计时执行操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vector定义初始化

    头文件 #include<vector> using std::vector; vector<T> v1; vector<T> v2(v1); vector< ...

  3. vcf格式

    Variant Call Format(VCF)是一个用于存储基因序列突变信息的文本格式.表示单碱基突变, 插入/缺失, 拷贝数变异和结构变异等.BCF格式文件是VCF格式的二进制文件. CHROM ...

  4. Leetcode 55. Jump Game

    我一开始认为这是一道DP的题目.其实,可以维护一个maxReach,并对每个元素更新这个maxReach = max(maxReach, i + nums[i]).注意如果 i>maxReach ...

  5. 纪念BLives 1.0版本发布

    历时两个多月的时间,BLives程序1.0发布,在开发程序期间自己经历了很多,考试,恋爱,学业,自己很纠结 很伤心,有时候很无助,为了让自己有事干,我在考试备考期间去设计程序- -#,虽然程序设计的一 ...

  6. QQ，微信第三方登陆

    感觉越是大公司的SDK越不好用,其实我也是一直在想为什么他们拿那么高的工资却干着不相应的事儿. 下面说下QQ和微信第三方登陆的一点坑 首先 (QQ互联)自带的sdk中  一个文件工程没有调用产生关联错 ...

  7. 数据结构作业——expectation（树形dp+dfs）

    expectation Description 给出一棵带权值的树,我们假设从某个节点出发,到目标节点的时间为两个节点之间的最短路.由于出发节点不好选取,所以选在每个节点都有一定的概率,现在我们要求从 ...

  8. POJ 2186 Popular Cows（Targin缩点）

    传送门 Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 31808   Accepted: 1292 ...

  9. RocketMQ原理解析－Consumer

    consumer 1.启动 有别于其他消息中间件由broker做负载均衡并主动向consumer投递消息,RocketMq是基于拉模式拉取消息,consumer做负载均衡并通过长轮询向broker拉消 ...

  10. 人工智能之一《tensorflow》

    http://wiki.jikexueyuan.com/project/tensorflow-zh/