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的更多相关文章

  1. css流光效果

    css流光效果1: <!DOCTYPE html> <html> <head> <title>ww</title> </head> ...

  2. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. 赞!15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  4. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  5. Simptip – 使用 Sass 制作的 CSS Tooltip 效果

    Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...

  6. CSS 居中效果完整指南

    本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...

  7. 纯CSS手风琴效果

    CSS手风琴效果 主体代码如下:                                                                                     ...

  8. 按钮制作技巧(css精灵效果)-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  9. CSS动画效果的回调

    用纯JS实现动画效果代码量大,计算复杂.因此现在前端页面的动画效果一般都采用CSS来实现. CSS动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...

随机推荐

  1. bzoj3261: 最大异或和 可持久化trie

    题意:给定一个非负整数序列{a},初始长度为N. 有M个操作,有以下两种操作类型: 1.Ax:添加操作,表示在序列末尾添加一个数x,序列的长度N+1. 2.Qlrx:询问操作,你需要找到一个位置p,满 ...

  2. mysql分组统计以及全部统计union all使用

    select '全部' AS `organ_category`, COUNT(*) AS amount FROM `organ_new` WHERE `city_code` ='SZ0755' AND ...

  3. Hadoop中 Unable to load native-hadoop library for your platform... using builtin-java classes where applicable问题解决

    环境 [root@vm8028 soft]# cat /etc/issue CentOS release 6.5 (Final) Kernel \r on an \m [root@vm8028 sof ...

  4. mybatis调用存储过程的两种方式

    先总结和说明一下注意点: 1.如果传入的某个参数可能为空,必须指定jdbcType 2.当传入map作为参数时,必须指定JavaType 3.如果做动态查询(参数为表名,sql关键词),可以使用${} ...

  5. openfiler简介

    Openfiler 1.        简介 Openfiler可以将一个工业标准的X86_64的架构系统转换为一个完全成熟的NAS/SAN存储设备或IP存储路由,并为存储管理者提供一个解决正快速成长 ...

  6. Zabbix监控系统

    前言: 一个初略自动化运维平台,应该实现以下3个层面自动化: 1.操作系统层面自动化 如果想要万台服务器共舞,没有操作系统这个舞台还怎么舞? 1.1:物理环境: OS预备自动安装(Pxe/KickSt ...

  7. Python学习之路【第三篇】--集合

    语法结构: set1.issubset(set2)判断集合set1是否为set2的子集,返回布尔值. ? 1 2 3 4 5 6 s1 = {'Java', 'PHP', 'Python', 'C++ ...

  8. vue 父组件通过props向子组件传递数据/方法的方式

    参考网址:https://segmentfault.com/a/1190000010507616 下面栗子中, callback是传递父组件的方法, mutationName是传递父组件的数据, Ap ...

  9. vmware自定义网段

    vmware会自动随机给分配192.168下的一个C段作为虚拟网卡(如VMnet8)的网段. 有时我们可能不想使用随机分配的网段而想使用指定网段 注意:配置成新网段后VMware会认为所有IP都没分配 ...

  10. excel 单元格0 不显示的最佳方法

    excel单元格设自定义格式, 条件:可以单元格内容判断后再设置格式.条件格式化只限于使用三个条件,其中两个条件是明确的,另个是“所有的其他”.条件要放到方括号中.必须进行简单的比较.例如这个条件:单 ...