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动画实现简单高效,但是在处理动画,控制动画过程上却缺少一些有效手段. 例如我们想在动画效果完成时调用回 ...
随机推荐
- 谈一谈HashMap类2
1.由一个小案例引出本博文的讨论 public class Demo1 { public static void main(String[] args) throws Exception { Stud ...
- 水题系列二:PhoneNumbers
问题描述: Phonenumbers 企业喜欢用容易被记住的电话号码.让电话号码容易被记住的一个办法是将它写成一 个容易记 住的 单词或 者短语 .例如 ,你 需要给 滑铁卢 大学打 电话时 ,可 以 ...
- 设计模式之单例模式-C++
单例模式也称单子模式.单件模式,通过单例模式可以保证系统中只有一个类只有一个实例,并提供一个访问它的全局访问点,该实例被所有程序模块共享 对于系统中的某些类来说,只有一个实例很重要,比如一个打印机可以 ...
- tp5消息队列使用
composer 安装 扩展包 composer require topthink/think-queue 注意版本:默认安装5.1的扩展包 地址: https://packagist.org/pac ...
- qt窗口最小化之后无法打开
转自: https://blog.csdn.net/qiangzi4646/article/details/79743604 http://www.cnblogs.com/lingdhox/p/331 ...
- Eclipse Mars-Ant无法使用jre1.6的问题
https://www.jianshu.com/p/24b9517d7f43 Eclipse 升级到Mars 4.5.1版本后,老项目使用jdk1.6,通过ant编译jar时,会遇到如下问题: 使用j ...
- SpringBoot启动器
pom.xml文件1.父项目 <parent> <groupId>org.springframework.boot</groupId> <artifactId ...
- 用mobiscroll.js的treelist实现弹出下拉效果
首先跟上次说的一样, 第一步:引入js.css样式 1)mobiscroll-2.13.2.full.min.css 2)jquery.min.js 3)mobiscroll-2.13.2.full. ...
- JS--label语句的使用
使用label语句可以在代码中添加标签,以便将来使用. 一般与for循环一起使用 如: var num = 0; outermost: for(var i=0;i<10;i++){ for(va ...
- js 求select option 的值和对应option的内容
<select onChange="aa(this)" name="a"> <option value="a">1& ...