css 纸张效果 666
css
/*内外阴影添加*/
.tool-intro {
width: 1020px;
height: 100px;
margin: 0 auto;
margin-bottom: 50px;
padding: 20px;
text-align: left;
font-size: 14px;
position: relative;
background-color: White;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 40px rgba(0, 0, 0, 0.1) inset;
} /*增加底部的重阴影效果 555~ 好技巧*/
.tool-intro::before, .tool-intro::after {
content: "";
position: absolute;
top: 50%;
bottom:;
left: 10px;
right: 10px;
z-index: -1;
box-shadow: 0 0 20px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
-ms-box-shadow: 0 0 20px rgba(0,0,0,0.8);
border-radius: 100px/10px;
-moz-border-radius: 100px/10px;
}
<article class="tool-intro">
</article>
css 纸张效果 666的更多相关文章
- css流光效果
css流光效果1: <!DOCTYPE html> <html> <head> <title>ww</title> </head> ...
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 赞!15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
- Simptip – 使用 Sass 制作的 CSS Tooltip 效果
Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...
- CSS 居中效果完整指南
本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...
- 纯CSS手风琴效果
CSS手风琴效果 主体代码如下: ...
- 按钮制作技巧(css精灵效果)-高级版
[转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...
- CSS动画效果的回调
用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
随机推荐
- bzoj3261: 最大异或和 可持久化trie
题意:给定一个非负整数序列{a},初始长度为N. 有M个操作,有以下两种操作类型: 1.Ax:添加操作,表示在序列末尾添加一个数x,序列的长度N+1. 2.Qlrx:询问操作,你需要找到一个位置p,满 ...
- 5月30---6月2 DedeCMS以及动态仿站
什么是DedeCMS 织梦内容管理系统(DedeCMS),是一个集内容发布.编辑.管理检索等于一体的网站管理系统(Web CMS),他拥有国外CMS众多特点之外,还结合中国用户的需要,对内容管理系统概 ...
- 可以进行SHA-1,SHA-224,SHA-256,SHA-384,SHA-512五种算法签名的工具类,以及简单说明
import java.security.MessageDigest; public class SignatureSHA { public static String signSHA(String ...
- ORACLE SQL 函数 INITCAP()
INITCAP() 假设c1为一字符串.函数INITCAP()是将每个单词的第一个字母大写,其它字母变为小写返回. 单词由空格,控制字符,标点符号等非字母符号限制. select initcap('h ...
- 在Eclipse中无法链接到svn,出现Previous operation has not finished; run 'cleanup' if it was interrupted异常
由于使用了clean或是clean up导致和svn断开链接 1.下载一个sqlite3.exe 2.将sqlite3.exe放到本项目的.svn同级目录下(.svn默认是隐藏,让.svn文件夹显示查 ...
- python dpkt解析ssl流
用法:python extract_tls_flow.py -vr white_pcap/11/2018-01-10_13-05-09_2.pcap -o pcap_ssl_flow.txt & ...
- Qt Widgets——抽象按钮及其继承类
QAbstractButton是有关“按钮”的基类 描述了一个按钮应该具有的组成.它的公有函数如下: QAbstractButton(QWidget * parent = ) ~QAbstractBu ...
- Linux安装/卸载软件教程
一.源码安装 ./configure #环境检查.生成makefile make #编译 make install #安装 这三条命令是最经典的Linux软件安装,适用于所有发行版 二.软件包管理工具 ...
- Pinpoint是一个开源的 APM (Application Performance Management/应用性能管理)工具,用于基于java的大规模分布式系统,基于Google Dapper论文
Pinpoint是一个开源的 APM (Application Performance Management/应用性能管理)工具,用于基于java的大规模分布式系统,基于Google Dapper论文 ...
- npm run build 打包后,如何运行在本地查看效果(Apache服务)
目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端口上进行本地调试.项目已经进行一半了,今天有时间突然想使用npm run build进行上线打包,试试 ...