设计稿中，有很多元素都存在阴影，在没有css3的时候，我们处理阴影都是用图片的形式来处理，或者是用js的方式来控制，相对于js脚本，png 格式的图片处理阴影是最好的方式，拿过来就可以直接使用，特别是对于一些细节上的地方，图片的效果是最理想的。反之使用图片处理阴影也存在着一些问题，1，图片的大小，2，修改的难易程度，为此css3新版中增加了阴影的样式：box-shadow

我们常用的书写方式：box-shadow: 0 16px 48px 0 #e2e4ee;

css3 阴影的具体设置：.box-shadow{ //Firefox4.0- -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; //Safariand Google chrome10.0- -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色; //Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9 box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; }

阴影设置还有一个特别之处在于颜色可以设置透明度，常写页面的的朋友会注意道，阴影写的方式，主要是两种：

box-shadow: 0 16px 48px 0 #e2e4ee;

box-shadow: 0px 10px 20px rgba(2,48,76,0.05);

最大的区别就是颜色设置上的区别；一个是颜色 HEX的方式，一个是颜色 RGB的方式；在RGB的颜色后面我们还可以添加一个透明度，这个对于颜色来说是特别方便的。

日，谷歌发布了最新的iOS版Chrome浏览器应用升级，在新版本中该应用添加了最新的Material Design界面，并增加了在iOS设备和Mac中快速无缝切换浏览内容的Handoff特性支持。最新应用的版本号为40.0.2214.61，更新还包括了对iOS 8系统的优化以及对iPhone 6 Plus大屏幕的视觉优化以及大量错误修复及性能增强。

谷歌最早在iOS的谷歌搜索应用上带来其最新的设计语言Meterial Design，干净利落的线条，简洁的阴影和鲜活的配色与iOS的扁平化设计也非常契合，谷歌将进一步为其更多iOS版应用更新界面元素；而最新的Handoff特性支持则能够让Chrome浏览器的内容在用户的Mac和iOS设备间无缝切换继续浏览。

Chrome浏览器带来Meterial Design

目前，更新过后的谷歌Chrome浏览器已在App Store中上架，有兴趣的网友可以前往下载更新。

享兴趣，传播快乐，增长见闻，留下美好！

亲爱的您，这里是LearningYard新学苑。

今天小编为大家带来话说前端18-盒子阴影以及新盒子属性

，欢迎您的访问。

Share interestsundefined spread happinessundefined increase knowledgeundefined and leave a good legacy!

Dear youundefined this is The LearningYard Academy.

Today Xiaobian brings you the knowledge sharing of Knowledge set | operations research backpack problem

welcome to your visit.

今天我们来讲一讲盒子阴影以及新盒子属性。

首先如其名“阴影”，就像影子一样显示在我们的布局里头。CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。文字阴影的属性也是。box-shadow的 其中属性为：

h-shadow：水平方向的阴影，可正可负

v-shadow：竖直方向的阴影，可正可负

Blur：模糊度

Spread：尺寸

Color：颜色

Inset：将阴影设置在内部。

Today, let's talk about box shadows and new box attributes.

First of all, as the name "shadow" shows up in our layout like a shadow. Box shadow has been added in CSS3. We can use the box-shadow property to add a shadow to the box. So is the attribute of the shadow. The attributes of box-shadow are:

H-shadow: horizontal shadow, which can be positive or negative.

V-shadow: vertical shadow, which can be positive or negative.

Blur: ambiguity

Spread: size

Color: color

Inset: Set the shadow inside.

通常为了方便，我们写成简写如box-shadow：4px 4px 4px 4px.....这样写，其中最前面的4px为上面的尺寸，然后顺时针填写，顺序不能乱（上右下左），其中要注意的是默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效。盒子阴影不占用空间，不会影响其他盒子排列。

Usually, for convenience, we write it as a shorthand such as box-shadow：4px 4px 4px 4px 4px, and write it like this, in which the foremost 4px is the above size, and then fill it in clockwise, and the order can't be out of order (top right, bottom left). It should be noted that the default is outset shadow, but you can't write this word, otherwise the shadow will be invalid. Shadows do not occupy space and will not affect the arrangement of other boxes.

文字阴影：text-shadow，与盒子阴影一致，但是没有尺寸和内部的设置。

CSS3盒子模型，CSS3中可以通过box-sizing来指定盒模型，有两个属性值，content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

Text: text-shadow, consistent with box shadow, but without size and internal settings.

CSS3 box model. In CSS3, you can specify the box model by box-sizing. There are two attribute values, content-box and border-box, so that the way we calculate the box size has changed.

盒子计算方式分成两种情况：

box-sizing：content-box(盒子大小) ：width+padding+border （以前默认盒子大小组成）

border-sizing：border-box 盒子大小为width（就是自己设置盒子的宽度大小不会撑大盒子）

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角。如果将其设置成宽度一样高就可以使盒子变成圆。也可以分开写：分开写 :

border-top-left-radius、

border-top-right-radius、

border-bottom-right-radius

border-bottom-left-radius

The box calculation method is divided into two cases:

Box-sizing: content-box: width+padding+border (previously composed of the default box size)

Border-sizing：border-box size of the border-box box is width (that is, setting the width of the box by yourself will not enlarge the box)

In CSS3, a new rounded border style has been added, so that our boxes can be rounded. The border-radius attribute is used to set the rounded corner of the outer border of an element. If it is set as high as the width, the box can be made into a circle. You can also write separately: write separately:

border-top-left-radius、

border-top-right-radius、

border-bottom-right-radius

border-bottom-left-radius

今天的分享就到这里了。如果您对今天的文章有什么独特的想法，欢迎评论留言，让我们相约明天，祝您今天过得开心快乐！

That's it for today's sharing. If you have any unique ideas for today's articleundefined please leave a commentundefined let us meet tomorrowundefined I wish you a happy day!

翻译：Google翻译

本文由LearningYard新学苑原创，部分图片文字来自网络，如有侵权请联系。

文字&排版|李仕阳

审核|闫庆红