css3 曲线阴影,翘边阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<style>
.box{
position: relative;
width: 700px;
height: 200px;
margin: 0 auto;
background: #fff;
text-align: center;
line-height: 200px;
font-size: 25px;
box-shadow: 0 1px 4px rgba(0,0,0,0.3),
0 0 1px rgba(0,0,0,0.3) inset;
}
.box:after,.box:before{
display: block;
position: absolute;
content:'';
background: rgba(0,0,0,1);
bottom: 0;
left: 15px;
right: 15px;
top: 50%;
z-index: -1;
box-shadow: 0 0px 20px rgba(0,0,0,0.4);
border-radius: 30%;
}
.box1{
width: 400px;
height: 300px;
background: #f1f1f1;
margin: 0 auto;
margin-top: 15px;
line-height: 300px;
font-size: 25px;
text-align: center;
box-shadow:0 1px 4px rgba(0,0,0,0.4),
0 0 60px rgba(0,0,0,0.4) inset;
border-radius: 12px;
position: relative;
}
.box1:before,.box1:after{
position: absolute;
content: '';
display: block;
width: 80%;
height: 80%;
left: 43px;
bottom: 11px;
background: #f1f1f1;
box-shadow: 0 8px 20px rgba(0,0,0,0.7);
z-index: -1;
}
.box1:before{
transform: skew(-12deg) rotate(-4deg);
}
.box1:after{
transform: skew(12deg) rotate(4deg);
}
</style>
</head>
<body>
<div class="box">
box-shadow曲线阴影
</div>
<div class="box1">
<div class="img">box-shadow翘边阴影</div>
</div>
</body>
</html>
css3 曲线阴影,翘边阴影的更多相关文章
- 【CSS3】---曲线阴影翘边阴影
效果图 代码 index <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title& ...
- CSS3实现图形曲线阴形和翘边阴影
首先,来看看完成之后的效果图: 实现原理 ①曲线阴影实现: 多个阴影重叠,就是正常阴影+曲线阴影 正常情况下,有个矩形有正常的阴影,作为主投影,这时候再定义一个有一定弧度圆角的圆角矩形,然后放在正常矩 ...
- 转载---CSS3实现曲线阴影和翘边阴影
预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...
- 关于C3翘边阴影的demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CSS3+HTML5实现块阴影与文字阴影
CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...
- CSS3学习之圆角box-shadow,阴影border-radius
最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css expression有争议的地方,对png24图片的处理也是用滤镜,类似( ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- css3圆角矩形、盒子阴影
css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...
- CSS3 --添加阴影(盒子阴影、文本阴影的使用)
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
随机推荐
- 20155324 2016-2017-2 《Java程序设计》第9周学习总结
20155324 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 学习目标 了解JDBC架构 掌握JDBC架构 掌握反射与ClassLoader 了解自定义泛 ...
- 第26月第18天 mybatis_spring_mvc
1. applicationContext.xml 配置文件里最主要的配置: <?xml version="1.0" encoding="utf-8"? ...
- 【mmall】Guava框架
Guava 简介:http://www.yiibai.com/guava 本项目主要用到了Guava缓存
- npm 的 --save 和 --save-dev 的区别
--save-dev 是作为开发依赖保存到 packsge.json 中的 devDependencies 中,即在开发环境中用到的依赖,如 webpack.babel 等用于开发打包的依赖,只是在执 ...
- Light oj 1099 - Not the Best 次短路
题目大意:求次短路. 题目思路:由于可能存在重边的情况所以不能采用邻接矩阵储存图,我用了邻接表来存图. 由起点S到终点E的次短路可能由以下情况组成: 1.S到v点的次短路 + v到E的距离 2.S到v ...
- 你必须知道的几种java容器(集合类)
一.基本概念 Java容器类类库的用途是“持有对象”,并将其划分为两个不同的概念: 1)Collection:一个独立元素的序列,这些元素都服从一条或者多条规则. List必须按照插入的顺序保存元素, ...
- RedisGeo
redis3.2版本增加了对GEO(地理位置)的支持 操作命令 geoadd(String key, Double longitude, Double latitude, String member) ...
- 【NLP CS224N笔记】Lecture 3 GloVe: Global Vectors for Word Representation
I. 复习word2vec的核心思路 1. Skip-gram 模型示意图: 2.word vectors的随机梯度 假设语料库中有这样一行句子: I love deep learning and N ...
- 如何访问IPV6?很简单,几个命令行即可。
参考:清华大学ISATAP隧道配置方法 简单介绍一下windows下的配置方法,其他系统的配置方法详见上面提供的个链接. 首先打卡管理员权限的命令行窗口,依次输入如下命令即可 netsh int ip ...
- ASP.NET Core中使用Autofac
⒈添加相关依赖 Install-Package Autofac ⒉扫描项目接口实现类 using Autofac; using System; using System.Collections.Gen ...