<!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. jQuery 树形菜单

    树形菜单 在 jQuery easyu中其左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才 ...

  2. <form:select>的使用

    最近在学习springMVC,用到了<form:select>标签,使用发过程中遇到了些问题,现在记录下,以防忘记. 我jsp页面是这样的: <%@ page language=&q ...

  3. 用pyspider爬淘宝MM照片

    #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on 2016-12-09 15:24:54 # Project: taobaomm ...

  4. div内容溢出时显示滚动条

    在style中添加overflow:scroll属性即可.

  5. mybits批量插入

    <!--批量插入--> <insert id="batchSave" parameterType="java.util.List"> i ...

  6. 【CVE-2016-10009】OpenSSH < 7.4 - agent Protocol Arbitrary Library Loading

    粗看了一下,发现这个漏洞还是比较鸡肋的.如果前提条件满足,该漏洞可以在ssh server执行任意指令.不过前提是:1.攻击者可以往受害者磁盘上写文件.

  7. spring mvc 的jpa JpaRepository数据层 访问方式汇总

    本文转载至:http://perfy315.iteye.com/blog/1460226 AppleFramework在数据访问控制层采用了Spring Data作为这一层的解决方案,下面就对Spri ...

  8. webapi-test

  9. zen Code 支持的代码样式

    这里是一个支持的属性和操作符的列表: E 元素名称(div, p); E#id 使用id的元素(div#content, p#intro, span#error); E.class 使用类的元素(di ...

  10. [Exchange 2013]创建约会和会议

    简介 会议和约会之间的重要区别是,会议有与会者,并且没有约会.约会和会议可以是单实例或属于重复序列,但与会者. 房间或资源中不包括约会,因为它们不需要发送一条消息.在内部,Exchange 使用相同的 ...