关于C3翘边阴影的demo
<!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的更多相关文章
- CSS3实现图形曲线阴形和翘边阴影
首先,来看看完成之后的效果图: 实现原理 ①曲线阴影实现: 多个阴影重叠,就是正常阴影+曲线阴影 正常情况下,有个矩形有正常的阴影,作为主投影,这时候再定义一个有一定弧度圆角的圆角矩形,然后放在正常矩 ...
- 转载---CSS3实现曲线阴影和翘边阴影
预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...
- css3 曲线阴影,翘边阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【CSS3】---曲线阴影翘边阴影
效果图 代码 index <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title& ...
- duilib 使用图片素材或者算法给窗体增加阴影(源码和demo)
转载请说明原出处,谢谢:http://blog.csdn.net/zhuhongshu/article/details/42580877 之前我写的程序使用阴影时,一直是使用codeproject网站 ...
- CSS3知识点整理&&一些demo
css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出 http://codepen ...
- CSS3--实现特殊阴影 (实例)
学习来源:慕课网http://www.imooc.com/view/240 先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ HTML结构 <body> <div class=& ...
- CSS3 盒阴影(box-shadow)详解
CSS3 的 box-shadow 有点类似于 text-shadow,只不过不同的是 text-shadow 是对象的文本设置阴影,而 box-shadow 是给对象实现图层阴影效果.本文我们搁下I ...
- CSS3 特效分解一
先声明下,下面的特效不是我发明的,对CSS3的创造力还不够,只是看了别人demo的源码,一点一点分析出来的.整理出的笔记,分享给大家.因为源码是好,但是一头扎进去半天出不来. 首先看个登陆框,如下,相 ...
随机推荐
- 常用的一些linux命令
最近接触到一些linux环境部署的事情,下面分享一些最近使用的比较频繁的一些linux命令~ 1.一次性移动多个文件到一个文件夹里 mv 被移动文件名 -t 目标文件夹 如:mv a.txt b.t ...
- 冰冻三尺非一日之寒--jQuery
第十七章 jQuery http://jquery.cuishifeng.cn/ 一.过滤选择器: 目的:处理更复杂的选择,是jQuery自定义的,不是CSS3中的选择器. ...
- thusc2016游记&&滚粗记&&酱油记
#include <cstdio> using namespace std; int main(){ puts("转载请注明出处:http://www.cnblogs.com/w ...
- react native 环境配置
1. 安装Homebrew Homebrew主要用于安装后面需要安装的watchman.flow 打开MAC的终端,输入如下命令: ruby -e "$(curl -fsSL https:/ ...
- RF Firefox Profile
默认情况下,robot framework是启动不带任何配置信息的firefox,如果需要启动带有profile的话,增加一个参数即可,如 Open Browser https://aws-qa5.i ...
- video.js播放mp4文件
HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...
- eclipse项目打包
一.直接在eclipse里export即可 二.如果需要打好的包可以直接使用,则需要修改包中的META-INF文件夹中的MANIFEST.MF文件,主要可能会涉及到的字段主要有以下两个. 1.Main ...
- 消除类游戏(js版)
最近一直在玩一款消灭星星的消除类游戏,周末无聊就用js也写了一遍,感觉玩比写还困难一直玩不到10000分.废话不多说直接上源码. 效果图(ps 页面有点难看木有美工) 代码总共456行,未经过严格测试 ...
- 在Unity中使用UGUI修改Mesh绘制几何图形
在商店看到这样一个例子,表示很有兴趣,他们说是用UGUI做的.我想,像这种可以随便变形的图形,我第一个就想到了网格变形. 做法1: 细心的朋友应该会发现,每个UGUI可见元素,都有一个‘Canvas ...
- 用Java来写常见的排序算法
随着校招的临近 算法是校招中很重要的一个部分 总结了常见几种排序算法,各种算法的时间复杂度和空间复杂度大家也需要多了解下 package com.huwei.sort; /** * 各种排序算法 * ...