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及其更新版本.下面分别介绍两种 ...
随机推荐
- TF, IDF和TF-IDF
在相似文本的推荐中,可以用TF-IDF来衡量文章之间的相似性. 一.TF(Term Frequency) TF的含义很明显,就是词出现的频率. 公式: 在算文本相似性的时候,可以采用这个思路,如果两篇 ...
- Python之List列表的循环和切片
一.循环(for):输出列表中的每一个元素 stus=['杨静','王志华','王银梅','乔美玲'] #一个个输出列表元素 for s in stus: print('s 是 %s'%s) s 是 ...
- RSA加解密-2
Java使用RSA加密解密签名及校验 package com.ihep; import java.io.BufferedReader; import java.io.BufferedWriter; ...
- 浏览器通知--window.Notification
参考链接:http://blog.csdn.net/guoquanyou/article/details/51726571 Web Notifications是HTML5 的一个特性,目前我知道的有谷 ...
- 昨天看了一个大神的fix类，清晰了然
.fix::after{ content:''; display:table; clear:both; }
- day 5 - 1 字典（dict）
dict dict key 必须是不可变数据类型,可哈希value:任意数据类型 dict 优点:使用二分查询来搜索数据存储了大量的关系型数据特点:无序的 数据类型划分:可变数据类型,不可变数据类型不 ...
- 如何在 JS 中嵌入大量 HTML 代码 --更新2017-10-10 16:37:09
一.一般方式 方式1:\ 要写在标签后面,看例子 var longString = "\ ------------------------\ ------------------------ ...
- ASCII字符集。扩展ASCII字符集。Unicode字符集分别支持多少个字符？
ASCII字符集.扩展ASCII字符集.Unicode字符集分别支持多少个字符? 256个字符和 65536个字符
- Javascript - ExtJs - 整合百度文章编辑器
ExtJs - 整合百度文章编辑器(ExtJs UEditor) 第一步:去官网下载最新版本的UEditor,UEditor下载. 第二步:在编辑器根目录创建一个Extjs-Editor.js,录入以 ...
- Django实战(一)-----用户登录与注册系统5（图片验证码）
为了防止机器人频繁登录网站或者破坏分子恶意登录,很多用户登录和注册系统都提供了图形验证码功能. 验证码(CAPTCHA)是一种区分用户是计算机还是人的公共全自动程序. 可以防止恶意破解密码.刷票.论坛 ...