box-shadow 阴影剖析
box-shadow的四个值分别是左右偏移，上下偏移，向四周模糊扩算，距离四周边缘的距离，最后一个是阴影的颜色值，如图示例：
上代码，复制代码，就可以看到上图的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-shdow-text</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: green;
display: inline-block;
margin: 30px;
}
.div1{
box-shadow: 10px 0 0 0 #000;
}
.div2{
box-shadow: 0 10px 0 0 #000;
}
.div3{
box-shadow: 0 0 10px 0 #000;
}
.div4{
box-shadow: 0 0 0 10px #000;
}
.div1,.div2,.div3,.div4{ }
.div5{
box-shadow: 0 0 10px 30px #000;
}
.div6{
box-shadow: -3px 3px 10px 5px #000;
}
.div7{
box-shadow: inset 0 0 10px 0 #0cc;
background: none;
}
.div8{
box-shadow: 0 0 0 5px #000,0 0 0 10px #999,0 0 0 15px #666;
}
</style>
</head>
<body> <div class="div1">左右偏移</div>
<div class="div2">上下偏移</div>
<div class="div3">向四周模糊扩散的</div>
<div class="div4">四周阴影的距离</div>
<div class="div5">配合起来看效果</div>
<div class="div6">配合起来看效果</div>
<div class="div7">阴影向内</div>
<div class="div8">阴影叠加</div> </body>
</html>
如有错误，请在评论中指出，感激不尽
欢迎加入前端开发交流群qq：143206839
box-shadow 阴影剖析的更多相关文章
- 分享div、text、Box Shadow(阴影)演示及代码的页面
附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html
- 如何设置box shadow的透明度
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...
- div边框阴影的实现【转载】
box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: Firefox支持Box Shadow(阴影):-moz-box-shadow:2px 2p ...
- css3のborder-radius
css3のborder-radius 今天主要练习了一下border-radius这个属性,这个是最常用的属性,所以先从它开始学习和总结吧. 我觉得需要注意以下几点: 1.书写规范: -webkit- ...
- CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀
CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...
- iOS 2D绘图 (Quartz2D)之阴影和渐变(shadow，Gradient)
原博地址:http://blog.csdn.net/hello_hwc/article/details/49507881 Shadow Shadow(阴影) 的目的是为了使UI更有立体感,如图 sha ...
- 阴影锥(shadow volume)原理与展望
转记:找了不少关于shadow volume原理的资料,还是这个帖子讲解的一目了然,转帖在这里,方便查阅.引用链接:http://blog.donews.com/yyh/archive/2005/05 ...
- 初学c# -- 学习笔记（五） winfrom无边框四周阴影
刚用到这个功能,网上扯淡的东西太多了,都是2边阴影,还什么窗口叠加.ps作图啥的,什么玩意.还是老外实在,google找的,无边框窗体,四边透明阴影. public partial class For ...
- CSS3之阴影
CSS3中新增属性-阴影,可以做出很多漂亮的效果. 文字阴影text-shadow text-shadow属性值的顺序: text-shadow: h-shadow v-shadow blur col ...
随机推荐
- 洛谷P1601 A+B Problem（高精）
题目描述 高精度加法,x相当于a+b problem,[b][color=red]不用考虑负数[/color][/b] 输入输出格式 输入格式: 分两行输入a,b<=10^500 输出格式: 输 ...
- [POI2012]OKR-A Horrible Poem
正解:对于一个区间l,r,它的循环节长度一定是它的因数. 然后如果循环节是这个长度,那么[l+len,r]一定等于[l,r-len]. 然后每次询问的时候就把它的长度的最小质因子提出来. BZOJ上都 ...
- vue实现双向绑定mvvm
剖析Vue实现原理 - 如何实现双向绑定mvvm 本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自 ...
- CSS max-width: 0;
写CSS,大家都知道max-width是要在宽度超过后才会生效,但今天我发现一个神奇的现象, 为表格td加上max-width: 0;可以让上下两个表格自动对齐,这句的作用到底是什么还有待研究,今天先 ...
- xdebug PHPStrom调试 安装
1.publi目录下新建info文件: 2.搜索是否已经安装过xdebug 3.下载安装 >[info] 自动查找相对应的版本 == 打开php.ini 原始: [XDebug]xdebug.p ...
- HDU 1569 方格取数(2)
方格取数(2) Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 15 ...
- （24）Spring Boot环境变量读取和属性对象的绑定【从零开始学Spring Boot】
凡是被Spring管理的类,实现接口 EnvironmentAware 重写方法 setEnvironment 可以在工程启动时,获取到系统环境变量和application配置文件中的变量. com. ...
- [bzoj3282]Tree_LCT
Tree bzoj-3282 题目大意:给你n个点m个操作.更改单点权值,加边,删边:查询路径异或和. 注释:$1\le n,m\le 10^5$ 想法:看到了加边删边,果断想到LCT维护.至于路径异 ...
- Java基础教程：tutorialspoint-spring mvc
教程: 来自turorialspoint的Spring MVC 4.1.6教程(英文),官网:https://www.tutorialspoint.com/springmvc/index.htm 离线 ...
- SEO 爬虫原理介绍
一篇关于网络爬虫程序的一些原理及体系结构纯技术文章,一些地方可能不会看的非常明确.对于SEO行业,常常和搜索引擎及其爬虫程序打交道,细致浏览下,一些不清楚而自己又非常想了解的地方,能够借助搜索来需找相 ...