<!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. 第一次源码分析: 图片加载框架Picasso源码分析

    使用: Picasso.with(this) .load("http://imgstore.cdn.sogou.com/app/a/100540002/467502.jpg") . ...

  2. ios学习资源

    1.BigShow学习Demo集合 https://github.com/BigShow1949/BigShow1949 2.[干货]一行代码实现自定义转场动画http://www.cocoachin ...

  3. iOS-RunLoop

    简单的说run loop是事件驱动的一个大循环,如下代码所示int main(int argc, char * argv[]) {     //程序一直运行状态     while (AppIsRun ...

  4. （转）gulp使用

    前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nod ...

  5. CSS实现文字省略

    1.首先给用于放文本的标签元素设置一个宽度值,并设置溢出属性overflow为溢出隐藏. width: 245px;/*一定要设置固定宽度*/ overflow: hidden;/*不显示超过对象尺寸 ...

  6. 数据结构之C语言实现哈夫曼树

    1.基本概念 a.路径和路径长度 若在一棵树中存在着一个结点序列 k1,k2,……,kj, 使得 ki是ki+1 的双亲(1<=i<j),则称此结点序列是从 k1 到 kj 的路径. 从 ...

  7. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. BootLoader(2440)核心初始化代码

    1.gboot.lds OUTPUT_ARCH(arm)ENTRY(_start)SECTIONS {    . = 0x30008000; //起始地址        . = ALIGN(4);// ...

  9. coreseek安装过程

    一.sphinx 全文检索 通过sphinx检索到id,然后到mysql里面拿到记录 什么是劝我呢检索?结构化数据: 具有固定格式或者长度的数据非结构化数据: 标题 内容 等不定长的数据非机构化数据还 ...

  10. thinkphp缓存

    最简答的缓存 // 缓存设置 public function ff(){ S('); } // 缓存读取 public function aa(){ $value = S('name'); echo ...