設計稿中，有很多元素都存在陰影，在沒有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新學苑原創，部分圖片文字來自網絡，如有侵權請聯系。

文字&排版|李仕陽

審核|閆慶紅