css3新增样式二---文字阴影，背景尺寸，背景的定位区域，多背景布局

一文字阴影

效果如下：

 h1{
      text-shadow:5px 5px 8px #00ff00;
    }

text-shadow:5px 5px 8px #00ff00;
其中，第一个值表示阴影水平的位置，可以为负值，必须写
第二个值表示阴影垂直的位置，可以为负值，必须写，
第三个值表示阴影模糊的距离，可写可不写。不写的话默认不模糊，只有文字的阴影
第四个值表示阴影的颜色 ，可写可不写。不写的话，默认和文字同样的颜色。

不写模糊值的时候，效果是这样的：

不写阴影颜色的时候，效果是这样的：

不写模糊值和颜色的时候，效果是这样的：

看着比较“乱”，建议模糊值和颜色不要同时省略不写。

文字阴影，我们最常见到的效果是这样的：

代码如下：

 h1{
       color: white;
       text-shadow:-5px -5px 4px black;
    }
  

颜色可以用单词表示。
注意，一个阴影的时候，中间用空格隔开（别用逗号），否则出不来效果。
多个阴影的时候，阴影之间用逗号隔开。如下：

 h1{
       color: white;
       text-shadow:-5px -5px 4px black,6px 5px 5px greenyellow;
    }

二 背景尺寸

在div里插入背景图片最初的样子，如下：

代码如下：

 div{
        width: 600px;
        height: 400px;
        border: 1px solid red;
        background: url("img/2.jpg") no-repeat;
    }

当设置背景尺寸之后，

  background-size: 200px 200px; 
  //分别表示背景图片的宽高值。 单位可以为px和%。

效果如下：

当设置一个值的时候

 background-size: 450px ; 
 //一个值的时候表示背景图宽度，高度自适应。

效果如下：

设置为contain的时候。
contain表示图片放大或者缩小到能够在盒子里面完全显示出来，但是可能盒子的一部分是空白的。

 background-size: contain ;

效果如下：

设置为cover的时候，
cover表示图片放大或者缩小到能够完全覆盖住盒子，但是，此时，图片的一部分是看不到的。

 background-size: cover ;

效果如下：

三背景的定位区域

background-origin:padding-box(内边距区域 默认值)
效果如下：

 div{
        width: 600px;
        height: 400px;
        border: 10px solid red;
        background: url("img/2.jpg") no-repeat;
        padding: 10px;
        background-origin:padding-box;
        }

这里背景图片相对于内边距框来定位

content-box 背景图片相对于内容框来定位
效果如下：

border-box 背景图片相对于边框定位

四 多背景布局

多个背景之间用逗号隔开，先写的背景在前面，后写的背景在后面。

div{
        width: 800px;
        height: 700px;
        border: 10px solid red;
        background: url("img/2.jpg") no-repeat,url("img/0.jpg");
        padding: 10px;
      }

效果如下：

先写的背景图片在前面，而且设置了不重复。
后写的背景图在后面，并且没有设置不重复。