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 阴影剖析的更多相关文章

  1. 分享div、text、Box Shadow(阴影)演示及代码的页面

    附图: 直接上链接:www.css88.com/tool/css3Preview/Box-Shadow.html

  2. 如何设置box shadow的透明度

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box- ...

  3. div边框阴影的实现【转载】

    box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: Firefox支持Box Shadow(阴影):-moz-box-shadow:2px 2p ...

  4. css3のborder-radius

    css3のborder-radius 今天主要练习了一下border-radius这个属性,这个是最常用的属性,所以先从它开始学习和总结吧. 我觉得需要注意以下几点: 1.书写规范: -webkit- ...

  5. CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

    CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...

  6. iOS 2D绘图 (Quartz2D)之阴影和渐变(shadow，Gradient)

    原博地址:http://blog.csdn.net/hello_hwc/article/details/49507881 Shadow Shadow(阴影) 的目的是为了使UI更有立体感,如图 sha ...

  7. 阴影锥(shadow volume)原理与展望

    转记:找了不少关于shadow volume原理的资料,还是这个帖子讲解的一目了然,转帖在这里,方便查阅.引用链接:http://blog.donews.com/yyh/archive/2005/05 ...

  8. 初学c# -- 学习笔记（五） winfrom无边框四周阴影

    刚用到这个功能,网上扯淡的东西太多了,都是2边阴影,还什么窗口叠加.ps作图啥的,什么玩意.还是老外实在,google找的,无边框窗体,四边透明阴影. public partial class For ...

  9. CSS3之阴影

    CSS3中新增属性-阴影,可以做出很多漂亮的效果. 文字阴影text-shadow text-shadow属性值的顺序: text-shadow: h-shadow v-shadow blur col ...

随机推荐

  1. js数组对象去重

    转: https://www.cnblogs.com/gaoht/p/9850449.html 在数组对象中去掉重复的对象: export function deteleObject(obj) { v ...

  2. 使用canvas截图网页为图片并解决跨域空白以及模糊问题

    前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. ...

  3. URAL - 1114-Boxes （分步乘法原理）

    题意; 给你n个盘子,A个红球,B个黑球,放的时候没有限制,可以不放,可以放一个红球,可以放一个黑球,也可以两个同时放,可以有剩余的球. 求一共有多少放法. 思路: 可以利用分步乘法原理,红球和黑球是 ...

  4. Linux学习笔记之1——文件和目录管理（硬连接和软连接）(连结档,相当于快捷方式）

    在这节将要学习linux的连接档,在之前用"ls -l" 查看文件属性的命令时, 其中第二个属性是连接数.那么这个连接数是干什么的?这就要理解inode. 先说一下文件是怎么存储的 ...

  5. 痛苦的Windows下的temp目录

    2007不能运行了,错误: [MSBuild Error] “DCC”任务意外失败. System.Configuration.ConfigurationErrorsException: 配置系统未能 ...

  6. [bzoj2631]tree_LCT

    tree bzoj-2631 题目大意:给定一个n个点的树,每个点的初始权值为1,支持:删边加边(这两个操作同时进行,保证操作之后还是一棵树),路径加,路径乘,查询路径和. 注释:$1\le n,q\ ...

  7. pt-kill--- MySQL数据库CPU飙升紧急处理方法

    MySQL数据库CPU飙升紧急处理方法 [日期:2014-01-22] 来源:Linux社区  作者:hcymysql [字体:大 中 小]       运行平稳的数据库,如果遇到CPU狂飙,到80% ...

  8. POJ 1984

    我做过的最棘手的一道题了,不是因为难,难就是不懂,而是因为明明思路对了,却调了很久程序没发现自己哪错了.....就连样例都不过 操,别人的代码::::::::::::::::::::::::::::. ...

  9. [React] Capture values using the lifecycle hook getSnapshotBeforeUpdate in React 16.3

    getSnapshotBeforeUpdate is a lifecycle hook that was introduced with React 16.3. It is invoked right ...

  10. 经验总结18--EF改动关系，多对多

    EF改动关系让我费事蛮多时间.能查的资料少,网上试了非常多方法都不正确. 最后还是自己研究出来了.在这里和大家分享下,有更好的方法也能够分享下. 首先说说我一般做改动功能时,前台传參数,后台使用对象接 ...