CSS3属性text-shadow与box-shadow_box-shadow可以均匀分布吗-程序员宅基地
序言
shadow字面含义——阴影；text-shadow和box-shadow就是文本阴影和盒子阴影了。text-shadow和box-shadow都是CSS3新增属性。
text-shadow（文本阴影）
目前市场上的所有主流浏览器都支持这个属性，IE的话得有10以上才支持。
主要是有四个属性值
- 阴影水平偏移值。可以为负值
- 阴影垂直偏移值。可以为负值
- 阴影模糊值。不允许负值
- 阴影的颜色。
那么首先来个小案例看看效果
// html部分
<div class="text">
text-shadow
</div>
// css部分
.text{
font-size: 30px;
text-shadow: 5px 5px 5px red;
}
效果图
可以看到在文本的右下角出现了像影子一样的阴影。此时的文本给人感觉就像是悬浮起来了一样。
有些时候会想要阴影在文本的四周均匀分布，那也很简单，只要不让文本阴影偏移就可以了，只需要设置text-shadow的前两个属性值都为0就可以了。
那又有些时候可能需要一些别(花)具(里)一(胡)格(哨)的感觉。比如想要文本四周都显示不同的阴影，怎么搞?
也很容易，设置阴影的时候不只是只能设置一个方向的阴影，意思就是可以在text-shadow后面写多个不同方向上的不同的阴影，怎么实现？看代码
.text{
margin: 30px;
font-size: 40px;
text-shadow: 0px 10px 5px red,
10px 0px 5px blue,
0px -10px 5px yellow,
-10px 0px 5px green;
}
为了更好的展示效果，我调大了阴影的偏移量。
效果图
可以明显的看到文本四周出现了不一样颜色的阴影，是不是非常别(花)具(里)一(胡)格(哨)。这也说明了文本设置阴影不一定只能设置一个阴影。
阴影的出现可以是动画性的,阴影加在hover后，设置transition属性
.text{
margin: 30px;
font-size: 40px;
transition: all 0.8s;
}
.text:hover{
text-shadow: 0px 10px 5px red,
10px 0px 5px blue,
0px -10px 5px yellow,
-10px 0px 5px green;
}
看效果
box-shadow（盒子阴影）
盒子阴影的属性值比文本阴影的属性值多两个
- 阴影水平偏移值
- 阴影垂直偏移值
- 阴影模糊值半径
- 阴影外延值（可以不写）
- 阴影的颜色
- 属性值固定inset。定义元素的阴影类型为内阴影，默认不写就是外阴影
此属性在IE9以上支持,主流浏览器都支持
老规矩，先来打个样
// html部分
<div class="box"></div>
// css部分
.box{
width: 100px;
height: 100px;
margin: 30px;
background-color: blue;
box-shadow: 5px 5px 5px red;
}
此时在横向上纵向上都设置了一定的偏移量，看效果
阴影处于盒子的左下方，此处第三个模糊值可以不用设置，不设置就是没有毛边，没有这种阴影的感觉，不设置这个没多大用处。
想要阴影在盒子四周展示和text-shadow一样，偏移量都设置为0就可以了，这里就不多写无用代码了。
再来看看他的另外两个值加上去之后的效果
.box{
width: 100px;
height: 100px;
margin: 30px;
background-color: blue;
box-shadow: 5px 5px 5px 10px red inset;
}
可以看到原本没有毛边的蓝色盒子现在有了毛边，这就可以验证是向内的阴影，10px就是阴影的扩散值。直白点解释就是给阴影加宽，并且这个宽不算在阴影的过渡内。
那么既然text-shadow能设置四周不一样的阴影那么box-shadow肯定也是可以的，text-shadow能哟动画性，box-shadow也是可以的，代码都是一样，这里就不写上来了。
注意点
关于这两个属性要注意的地方其实没什么，主要一点就是不要搞混了，前两天写一个进度条上面小圆点的阴影，加上阴影后就是不显示，没有阴影效果，我在那找半天，最后发现设置成了text-shadow。通过这个案例，希望大家引以为戒，不要像我这个憨憨一样。这么低级的错误。但是也总结出来了 ，如果你的阴影没有效果，不妨先看看是不是设置错了属性。
智能推荐
《麦肯锡工作法》读书分享-程序员宅基地
前言麦肯锡公司（McKinsey&amp;Company）是由美国芝加哥大学商学院教授詹姆斯·麦肯锡（James O’McKinsey）于1926年在美国创建，现在麦肯锡公司已经成为全球最著名的管理咨询公司。《麦肯锡工作法》这本书是作者是大岛祥誉，曾在麦肯锡公司从事新事业开拓战略、公司战略以及经营战略的制定等咨询项目。本书以实现“品质×效率”为主题，介绍麦肯锡内部人士重视的“39个工作习惯”。...
git 命令大全-程序员宅基地
git branch 查看本地所有分支git status 查看当前状态git commit 提交git branch -a 查看所有的分支git branch -r 查看远程所有分支git commit -am "init" 提交并且加注释git remote add origin [email protected]:ndshowgit push
牛客网华为机试题整理_无敌喜之郎的博客-程序员宅基地
//计算字符串最后一个单词的长度，单词以空格隔开，字符串长度小于5000。var input = readline();function test(text) { return text.split(' ')[text.split(' ').length - 1].length}console.log(test(input));// 写出一个程序，接受一个由字母、数字和空格组成的字符串，和一个字符，然后输出输入字符串中该字符的出现次数。（不区分大小写字母）var input = rea_牛客网华为机试题
python怎么使用rgb颜色-python – 根据RGB值更改图像的颜色-程序员宅基地
请参阅链接问题中的解决方案：您可以调整shift_hue()函数来调整色调,饱和度和值,而不仅仅是调整色调.这应该允许您根据需要移动所有这些参数.原版的：def shift_hue(arr, hout):r, g, b, a = np.rollaxis(arr, axis=-1)h, s, v = rgb_to_hsv(r, g, b)h = houtr, g, b = hsv_to_rgb(h,..._python中的颜色怎么用rgb值
autojs之clickable属性为false的控件如何模拟点击_clickable false-程序员宅基地
方法一: 利用父控件1. 寻找父控件，判断父控件能否点击以某多多的签到控件为例，如图2. clickable属性为false3. 这时我们寻找它的父控件，如图4. 发现clickable属性为true，是可点击的，可以通过点击父控件模拟签到方法二: 利用坐标实现模拟点击1. 还是以某多多的签到控件为例,如图2. clickable属性为false，可以看到bounds的值3. bounds的值为(501,721,579,772)，这是签到控件所在的坐标，点击此处的坐标 (cli_clickable false
PBRT_V2 总结记录 <4> WhittedIntegrator-程序员宅基地
WhittedIntegrator 类// WhittedIntegrator Declarationsclass WhittedIntegrator : public SurfaceIntegrator {public: // WhittedIntegrator Public Methods Spectrum Li(const Scene *scene, const R...
随便推点
《活着》读后感4500字_活着读后感博客-程序员宅基地
《活着》读后感4500字：听说张艺谋在转型拍商业电影前，拍过一部电影《活着》，被誉为是他拍得最好的电影。想看已经有大半年了，却一直没看。年底有空，想培养一下“艺术细胞”去学习下，看了下电影内容简介，好像内容很悲惨，不忍心看。挡不住电影原著--余华写的《活着》盛名的诱惑，想着文字的冲击力应该没有电影画面那么直观强烈，就打开书本,可没想到小说内容更悲惨，太扎心了。一个泪腺萎缩，神经大条的中年人，深..._活着读后感博客
【Linux中高级运维： 第59天——集群体系】第1章：高并发业务架构演变+LVS负载转发原理+扩展集群-程序员宅基地
企业业务架构演变LVS负载转发原理扩展内容：LVS支持30万并发请求，单台nginx支持1~3万并发请求，可在LVS后跟15台nginx来完成在前台应对30万并发的架构设计。...
android隐藏ActionBar_activity去掉bar-程序员宅基地
隐藏ActionBar找了好久，之前一直用的这个始终不行<item name="android:windowNoTitle">true</item>去掉android即可<item name="windowNoTitle">true</item>或者在activity或application中使用，因为我已经使用了高德地图的api，只能选择更改xml解决android:theme="@android:style/Theme.NoTitleB._activity去掉bar
error while loading shared libraries: libxcb-aux.so.0: cannot open shared object file-程序员宅基地
Q:openbox: error while loading shared libraries: libxcb-aux.so.0: cannot open shared object file: No such file or directoryA:Because xcb-util-0.3.6 update to xcb-util-0.3.8 ChangeLog: comm...
4.RabbitMQ高级特性 幂等 可靠消息 等等_往日时光--的博客-程序员宅基地
rabbitmq高级特性
语音识别（ASR)论文优选：WeNet之U2++_wenet论文推荐csdn_我叫永强的博客-程序员宅基地
声明：平时看些文章做些笔记分享出来，文章中难免存在错误的地方，还望大家海涵。平时搜集一些资料，方便查阅学习：http://yqli.tech/page/speech.html。如转载，请标明出处。欢迎关注微信公众号：低调奋进以前阅读的是语音合成相关的代码，现在有机会做一些识别相关的工作，所以接下来也会整理识别相关的资料。U2++: Unified Two-pass BidirectionalEnd-to-end Model for Speech Recognition本文是出门问问联合西北工业._wenet论文推荐csdn