如何设置box shadow的透明度
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS3的普及，这一特殊效果使用越来越普遍。
基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
box-shadow属性的参数设置取值：
阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。
浏览器的兼容：
为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。
注意：出于方便，后文的css属性有的地方只写了box-shadow属性，没有写-moz-和-webkit-前缀的形式，在使用中不要忘记加上。
如何实现平滑的“box-shadow”动画效果
这里有一个简单的办法可以实现上述问题效果。如果要实现最小的重新绘制，应该创建一个伪元素并对其 opacity 元素进行动画处理，使其以每秒60帧的动画模仿运动物体相同的效果。
实例
认真观察 这个实例 ，比较我们在其中使用的不同技巧。你是不是会说两者效果看起来一样。唯一不同的是我们如何应用阴影并对其进行动画处理。在左边实例中，我们鼠标 hover (悬浮)时，对 box-shadow 应用了动画效果。而在右边的实例中，我们用 ::after 添加了一个伪元素并对其设置了阴影，并对该元素的 opacity 元素进行了动画处理。
如果你使用开发工具尝试了其中之一，您应该会看到类似这样的东西 (绿色条表示已经绘制，其越少越好):
当你悬停在左边的卡片(在 box-shadow 上应用动画)与悬浮在右边的卡片(对其伪元素的 opacity 应用动画)进行相比时，你会很明显的发现有更多的重新绘制。
为什么我们会看到这种效果？有 很少的 CSS 属性 ，即 opacity 和 transform ，进行动画处理时，不会不断触发重绘每一帧。我们最好坚持只在动画中更改这两个属性实现最小化重绘 (您的浏览器不得不做的工作)。
抛却其它的布局样式，这就是这两种技术之间的 关键区别 ︰
/* The slow way */
.make-it-slow {
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: box-shadow 0.3s ease-in-out:
}
/* 鼠标悬停实现更大阴影的过渡 */
.make-it-slow:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
/* The fast way */
.make-it-fast {
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* 设置更大的阴影并将之隐藏 */
.make-it-fast::after {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 0.3s ease-in-out:
}
/* 鼠标悬停时实现更大阴影的过渡显示 */
.make-it-fast:hover::after {
opacity: 1;
}
详细分解
基于上面所述，让我们看看如何创建上面示例中演示的 3D卡片效果 。第一步是将阴影转移到到一个伪元素，就像我们上面所做的一样。让我们也给所有创建的卡片添加布局代码:
/* 创建一个简单白色盒子,并添加阴影 */
.box {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: all 0.3s ease-in-out;
}
/* 创建隐藏的伪元素 */
/* 最终样式包含阴影 */
.box::after {
content: ’’;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transition: opacity 0.3s ease-in-out;
}
注意,我们要 .box 和 .box::after 添加了 transition 元素，因为我们要对这两个元素进行动画处理: .box 上应用 transform 元素, .box::after 上应用 opacity 元素.
这些样式给我们展示了一个具有微妙 box-shadow 样式的白色盒子。这里 .box::after 上的阴影已经完全被隐藏，不能与盒子效果相互影响。
若要创建 演示 中相同的效果，现在我们需要做的是:当鼠标悬停在 .box 时，产生放大效果，并且在伪元素和阴影上实现淡化:
/* 放大盒子 */
.box:hover {
transform: scale(1.2, 1.2);
}
/* 伪元素更大阴影的淡化 */
.box:hover::after {
opacity: 1;
}
总之，这就是所有的CSS样式，包括不同浏览器的兼容样式和一些额外的自定义缓动效果:
.box {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.box::after {
content: ““;
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.box:hover {
-webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25);
}
.box:hover::after {
opacity: 1;
}
显然这里与只使用 box-shadow 相比应用了大量的 CSS 来实现相同的动画效果，只是改进性能。这又何必呢？
即使你的桌面处理 box-shadow 动画时没有任何问题，你的手机可能也不会出现问题。但是当你处理更为复杂的布局时，你就会发现你的桌面可能开始表现出症状。
css box-shadow 怎么设置透明度
1、首先打开html编辑器，新建一个html文件，在文件内写入两个div，设置它们的样式为div1和div2：
2、然后分别设置两个div的样式，给它们相同的高度和宽度以及颜色，最后设置box-shadow属性，这里的颜色使用rgba来设置，最后一个属性好就是设置透明度的，其中一个设置1另一个设置0.5即可：
3、最后在浏览器中观察两个div的阴影样式，下面的明显比上面的要淡一些。以上就是css中box-shadow设置透明度的办法：
css中，box-shadow有多个值用逗号隔开的,这些值代表了哪些边啊比如
一般写3个像素值
+
一个颜色值
就行
前面第一个是指上下的阴影扩散程度，正值为向下扩散，负值为向上扩散，如果为0代表向上下同时根据第三个值的大小往外扩散。
第二个是指向左右扩散，正值为向右扩散，负值为向左，为0则代表向左右同时。
第三个值简单的理解为扩散的距离
颜色值
是指阴影的颜色，你可以想象阴影的第一个（不透明）的像素颜色就是它，然后逐渐的过度到完全透明。你上面的例子，是指它用的是RGB格式（3个255是白色，但后面的0.3让它变成灰色），也可以用类似
#666666
上面讲到第三个值（像素值）时，只简单的解释为“距离”，没有直接说是指：由“实”到完全透明的距离。就是因为你给出的例子里有“第四个像素值”，这个是指阴影“扩展”。如果你会PS的话，这个很好理解；否则，你看下我下面说的，考考你理解力。
首先，第三个值已经设定阴影的距离，第四个值并不会改变这个距离。因此，它能改变的就是阴影的“透明度”。阴影一般的效果都是由不透明到完全透明，而第四个值就让阴影在设定的距离内（第三个值），阴影不完全透明（即阴影效果为不透明到半透明）。
当然第四个值如果设置比第三个值小很多的话，你基本感觉不出变化，设置大点能感觉出来。
box-shadow属性四个值是什么
1、offset-x
第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。
2、offset-y
第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。
3、blur
第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。
4、spread
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。
设置水平垂直偏移得到阴影效果：
outset情况：水平垂直偏移为0，但是不设置blur和spread，看不到阴影，因为此时box-shadow的周长和border-box一样，所以可以通过设置偏移让阴影显示出来。
inset情况：水平垂直偏移为0，不设置blur和spread，同样看不到阴影，因为此时box-shadow的周长和padding-box一样，同样可通过设置偏移让阴影显示出来。
box-shadow属性是什么
box-shadow 属性接受值最多由五个不同的部分组成：offset-x；offset-y；blur；spread；color；position。
1、offset-x
第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。
2、offset-y
第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。
4、blur
第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用 高斯模糊 滤波器带来的效果。值为 0 意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur 值越大，阴影则更不锋利而更朦胧 / 模糊。负值是不合法的，会被修正成 0。
5、spread
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。
6、color
color 部分的值正如所预料的，是指阴影的颜色，可以是任意的颜色单元 。
7、position
此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影。
box-shadow的作用：
box-shadow是css3的一个新属性，用来实现阴影效果，阴影分为内阴影和外阴影两个效果，可以通过逗号添加多个阴影效果。通过对box-shadow使用的理解，想要一个div的四周都有阴影的话，可通过box-shadow的四周阴影叠加来实现。
box-Shadow属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
box-shadow和text-shadow的区别是什么
box-shadow: inset x-offset y-offset blur-radius spread-radius color (投影方式)(X轴偏移量)(Y轴偏移量)(阴影模糊半径)(阴影扩展半径)(阴影颜色) box-shadow: 6px 6px 6px #292929;对应的值 inset———默认的情况下是外阴影，取其唯一值。
一英语语法的重要性
（1）在教学过程中，或与外国的朋友交流时，可以很清楚地知道所有的词汇，但却无法将词汇，用正确的语法连接成一个句子，导致在说的过程中，出现语法错误，那么别人也很难理解他所想表达的意思，因此，学习英语语法对口语十分重要。
（2）阅读作为考试的难点之一，在考试中的分值占据较大部分，也有多数学生在英语考试中，阅读失分的比较严重，而且还找不到原因。语法作为写作无法缺少的一部分，特别是在考试中，要想在重要的考试中减少作文部分的失分，那么就要写出更加精彩的句子。
二怎么快速学会英语
（1）阅读。古典文学，书籍，报纸，网站，电子邮件等等，只要是用英语写的，就可以阅读，因为这是你扩充词汇量最好的方式，扩展新的单词是通过上下文来扩展，而不是背词典。积极扩展新词汇时刻注意流行的词汇。
（2）与真人对话语言是交流的工具，到目前为止，机器很难完全替代人的作用。一定要和真人对话，最好是英语为母语国家的人。订阅相关的视听资料微信微博上有很多有意思，有意义的英文资料，大家可以去找找，例如速恩英语的免费课堂就不错。
求css3 box-shadow的参数用法详解
box-shadow 属性向框添加一个或多个阴影。
box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
注意事项：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。