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及其更新版本.下面分别介绍两种 ...
随机推荐
- 三、文件IO——系统调用（续）
3.2.4 read 函数--- 读文件 read(由已打开的文件读取数据) #include<unistd.h> ssize_t read(int fd, void * buf, siz ...
- 高并发秒杀系统--junit测试类与SpringIoc容器的整合
1.原理是在Junit启动时加载SpringIoC容器 2.SpringIoC容器要根据Spring的配置文件加载 [示例代码] package org.azcode.dao; import org. ...
- Leetcode#657. Judge Route Circle（判断路线成圈）
题目描述 初始位置 (0, 0) 处有一个机器人.给出它的一系列动作,判断这个机器人的移动路线是否形成一个圆圈,换言之就是判断它是否会移回到原来的位置. 移动顺序由一个字符串表示.每一个动作都是由一个 ...
- ionic3安装
1.安装 1)安装nodejs: 官网下载安装 2)可选安装 cnpm: //安装了cnpm后,以后用到npm安装的东西都可以把npm替换成cnpm npm install -g cnpm --re ...
- Django学习手册 - 自定义分页函数
前端代码: <div class="xianshi"> {% for i in info %} <ul> <li>{{ i }}</li& ...
- Javascript - DOM文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
- 最全免费CDN公共库——网站提速
开源静态文件 CDN 我们的目标是提供这样一个仓库,让它尽可能全面收录优秀的开源库,并免费为之提供 CDN 加速服务,使之有更好的访问速度和稳定的环境.同时,我们也提供开源库源接入的入口,让所有人都可 ...
- cartographer 分析
原文链接:http://blog.csdn.net/zyh821351004/article/details/52421005 cartographer与karto的比较 1. 两者采取的都是图优化框 ...
- SQL 删除的三个语句：DROP、TRUNCATE、 DELETE 的区别
转载:http://www.runoob.com/sql/sql-delete.html DROP: DROP test; 删除表test,并释放空间,将test删除的一干二净. TRUNCATE: ...
- 关于Mac或Linux下GO的Permission denied提示错误
有时候当你下载第三方库的时候,编译时会提示Permission denied 权限不足, 出现这种错误因为权限不够.其中一种办法是需要把你项目目录和go的pck.bin权限放开. chmod -R 7 ...