css3几个新属性

1、text-shadow  文字阴影

p{
     text-shadow:2px 2px 10px #000;  
}

四个参数，依次：

a：水平偏移

b：垂直偏移

c：阴影程度

d：阴影颜色

 

2、word-break:break-all  

解释：允许单词换行，是紧接前面内容

 

3、word-wrap:break-word

解释：允许单词换行，是先把单词换一行

4、white-space:nowrap

解释：强制文本不换行

 

5、text-overflow:ellipsis

解释：显示省略符号来代表被修剪的文本。

 

6、box-sizing：border-box  

解释：其实就是把border和padding计算在width之内，也就是所说的怪异模式。

使用时：

-webkit-box-sizing: 100px; // for ios-safari, android

-moz-box-sizing:100px; //for ff

box-sizing:100px; //for other

 

7、background-clip

解释：规定背景的绘制区域　　

值有三个：

border-box 背景被裁剪到边框盒。（默认属性值）

padding-box 背景被裁剪到内边距框。

content-box 背景被裁剪到内容框。

举个栗子，比如border-box和padding-box的区别

 

border-box：

.box{
    width:100px;
    height:100px;
    border:10px dashed red;
    background: greenyellow;
    background-clip: border-box;
}

效果：

 

 

 

padding-box：

.box{
    width:100px;
    height:100px;
    border:10px dashed red;
    background: greenyellow;
    background-clip: padding-box;
}

效果：

 

 

8、background-origin

解释：background-origin 属性规定 background-position 属性相对于什么位置来定位。

值有三个：

border-box 背景图像相对于内边距框来定位。（默认属性值）

padding-box 背景图像相对于边框盒来定位。

content-box 背景图像相对于内容框来定位。

举个栗子，比如padding-box和content-box的区别

padding-box:

.box{
    width:250px;
    height:250px;
    border:10px dashed red;
    background:greenyellow url(123.jpg) no-repeat;
    background-origin:padding-box;
}

效果：

content-box：

.box{
    width:210px;
    height:210px;
    padding:20px;
    border:10px dashed red;
    background:greenyellow url(123.jpg) no-repeat;
    background-origin:content-box;
}

效果：

 

 

9、background-size:cover

解释：规定背景图像的尺寸，cover规定把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

栗子：

.box{
    width:450px;
    height:300px;
    border: 1px solid #000;
    background:greenyellow url(123.jpg) no-repeat;
            
}

这里盒子大小是450*300，而背景图片大小为300*200，自然没法填满，效果：

接下来添加属性：background-size:cover

.box{
    width:450px;
    height:300px;
    border: 1px solid #000;
    background:greenyellow url(123.jpg) no-repeat;
    background-size:cover;
}

效果：