<!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. 常用的一些linux命令

    最近接触到一些linux环境部署的事情,下面分享一些最近使用的比较频繁的一些linux命令~ 1.一次性移动多个文件到一个文件夹里 mv  被移动文件名 -t 目标文件夹 如:mv a.txt b.t ...

  2. 冰冻三尺非一日之寒--jQuery

    第十七章     jQuery          http://jquery.cuishifeng.cn/ 一.过滤选择器: 目的:处理更复杂的选择,是jQuery自定义的,不是CSS3中的选择器. ...

  3. thusc2016游记&&滚粗记&&酱油记

    #include <cstdio> using namespace std; int main(){ puts("转载请注明出处:http://www.cnblogs.com/w ...

  4. react native 环境配置

    1. 安装Homebrew Homebrew主要用于安装后面需要安装的watchman.flow 打开MAC的终端,输入如下命令: ruby -e "$(curl -fsSL https:/ ...

  5. RF Firefox Profile

    默认情况下,robot framework是启动不带任何配置信息的firefox,如果需要启动带有profile的话,增加一个参数即可,如 Open Browser https://aws-qa5.i ...

  6. video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

  7. eclipse项目打包

    一.直接在eclipse里export即可 二.如果需要打好的包可以直接使用,则需要修改包中的META-INF文件夹中的MANIFEST.MF文件,主要可能会涉及到的字段主要有以下两个. 1.Main ...

  8. 消除类游戏(js版)

    最近一直在玩一款消灭星星的消除类游戏,周末无聊就用js也写了一遍,感觉玩比写还困难一直玩不到10000分.废话不多说直接上源码. 效果图(ps 页面有点难看木有美工) 代码总共456行,未经过严格测试 ...

  9. 在Unity中使用UGUI修改Mesh绘制几何图形

    在商店看到这样一个例子,表示很有兴趣,他们说是用UGUI做的.我想,像这种可以随便变形的图形,我第一个就想到了网格变形. 做法1: 细心的朋友应该会发现,每个UGUI可见元素,都有一个‘Canvas ...

  10. 用Java来写常见的排序算法

    随着校招的临近 算法是校招中很重要的一个部分 总结了常见几种排序算法,各种算法的时间复杂度和空间复杂度大家也需要多了解下 package com.huwei.sort; /** * 各种排序算法 * ...