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及其更新版本.下面分别介绍两种 ...
随机推荐
- Javaweb学习笔记——（九）——————Servlet的进入，及ServletConfig、GenericServlet、HttpServlet、ServletContext、获取类路径资源
Servlet1.什么是Servlet? *Servlet是Javaweb三大组件之一(Servlet,Filter,Listener) *Servlet是用来处理客户端请求的动态资源 *Servle ...
- webxml样板
<!--<!DOCTYPE web-app PUBLIC--> <!--"-//Sun Microsystems, Inc.//DTD Web Application ...
- C++ 窗口
DestroyWindow(); //销毁窗口 可重载的事件: PostNcDestroy 窗口销毁后调用
- luogu P3241 [HNOI2015]开店
传送门 (下面记年龄为\(a_x\))题目要求的是\[\sum_{x=1}^{n} [a_x\in [l,r]]*dis(x,u)=\sum_{x=1}^{n} [a_x\in [l,r]]*de_x ...
- javascript判断节点是否在dom
在项目中碰到同事写的一段代码: //焦点必须在实时dom树中 if (ele && typeof this.document.contains === "function&q ...
- SpringCloud Netflix Eureka（服务注册/发现）
⒈Eureka是什么? Eureka是Netflix的一个子模块,也是核心模块之一,Eureka是一个基于REST的服务,用于定位服务以实现云端中间层服务发现和故障转移,服务注册与发现对于微服务架构来 ...
- json文件解析
场景 读取json文件,读取子域名扫描结果 实现 >>> import json >>> with open("C:\\Users\\Windows32\ ...
- ES6的Promise浅析
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大. 它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象. P ...
- jquery知识巩固
1.jquery中的index方法和eq方法 index()方法:index()获取的索引值是相对同兄弟元素,即同一个父元素,,所以首先要确认一下这个元素的兄弟是谁,例如: 当遇到以上的情况很容易就觉 ...
- css3新属性运用
1.css3新单位vh.vw,这个单位是相对显示窗口的宽度或高度 vh等于viewport高度的1/100.例如,如果浏览器的高是900px,1vh求得的值为9px.同理,如果显示窗口宽度为750px ...