<!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. caffe中卷积层和pooling层计算下一层的特征map的大小

    pool层,其中ceil是向上取整函数 卷积层:

  2. Python 【第八章】：JavaScript 、Dom、jQuery

    JavaScript 放置位置 body内部最下面,这样可以避免javascript链接失效时,长时间加载不到页面html内容 变量: var a =123 局部变量 a = 123 全局变量 作用域 ...

  3. Java防止SQL注入（转）

    一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编程时的疏忽,通过SQL语句,实现无帐号登录,甚至篡改数据库. 二.SQL注入攻击的总体 ...

  4. 【Android群英传】学习笔记（三·一）

    本篇笔记中,笔者将记录在ListView的使用的技巧 虽然5.X时代,RecyclerView在很多地方都在逐渐取代ListView,但ListView的使用范围还是很广泛的,它这万年老大哥的地位也不 ...

  5. C#做有模和非模式化窗体 传值例程

    有模窗体:指的是一定要在第二个窗体上操作之后 才能去操作前者窗体 :例如,如果一个对话框,在可以切换到其它窗体或对话框之前要求先单击"确定"或"取消",则它就是 ...

  6. Java加载资源文件几种方法

    from: http://andyzhu.blog.51cto.com/4386758/775836/ import java.net.URL; import org.springframework. ...

  7. 个人对B/S项目的一些理解（二）

    以下是我自工作以来,结合对C/S项目的认知,对B/S项目的一些理解. 如有不足或者错误,请各位指正.     ----数据处理的升级   在上面的描述中,大家也看到了,远古时期的程序员,其实也听不容易 ...

  8. MVC POST在ACTION上进行多个模型的数据绑定

    首先声明,接下来的东西并不符合本人认同的严谨的MVC模式. 用MVC做项目的过程中,越来越多的用到不严谨的MVC编程. 比如,在"cshtml"文件中写: @Html.Raw(DB ...

  9. php验证身份证号码的正确性

    /********************php验证身份证号码是否正确函数*********************/function is_idcard( $id ) {   $id = strto ...

  10. webapi-1