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动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
随机推荐
- readline与readlines之间的简单区别
首先来探望一下readline这位女同志: 偷窥一下user.txt内容: user password buqiuen 123456 xietingfeng 123456 一.readline例子: ...
- 6月17 练习ThinkPHP的增删改查
利用ThinkPHP连接数据库的增删改查的例题:用到的数据库表名Info表,Nation表 数据显示页面:MainController.class.php中的ShowInfo方法 //例题 //显示所 ...
- hbase知识
HBASE是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统 HBASE的目标是存储并处理大型的数据,更具体来说是仅需使用普通的硬件配置,就能够处理由成千上万的行和列所组成的大型数据. HBASE ...
- 2017-3-31/socket
1. 讲讲你对套接字编程的理解,它的协议是如何的? socket通常称为"套接字",用于描述IP地址和端口,是一个通信链的句柄.应用程序通过套接字向网络发出请求或应答网络请求. 服 ...
- 使用IntelliJ IDEA 配置Maven(转)
原文地址:使用IntelliJ IDEA 配置Maven 1. 下载Maven 官方地址:http://maven.apache.org/download.cgi 解压并新建一个本地仓库文件夹 2.配 ...
- 关于Oracle RAC中SCN原理和机制的探索
今天看书时看到了关于RAC中SCN的问题,为了进一步搞清楚其内部原理和机制,对该问题进行了广泛的查阅和搜索,遗憾的是,可以参考的资料很少,网上大部分是人云亦云的帖子,其中,详细介绍其内部原理和机制的资 ...
- 【转】大型Vuex项目 ,使用module后, 如何调用其他模块的 属性值和方法
Vuex 允许我们把 store 分 module(模块).每一个模块包含各自的状态.mutation.action 和 getter. 那么问题来了, 模块化+命名空间之后, 数据都是相对独立的, ...
- mysql5.6主从配置
在windows 7系统上安装mysql5.6, 主库: 安装目录为:D:\Program Files\MySQL\MySQL Server 5.6 从库: 对安装目录进行拷贝,重命名:D:\Prog ...
- js正则表达式取{}中的值
var reg = /[^\{}]*\{(.*)\}[^\}]*/; var str = "1111{122}"; console.log(str.replace(reg,'$1' ...
- js 时间戳转特定格式的日期
var Tools = {}; Tools.formatDate = function (fmt,timestamp) { if(timestamp){ var date = new Date(par ...