css3新属性介绍

background-attachment

当设置的背景图片过大，而宽高太小时，设置

overflow:auto

，滚动条移动时，图片背景不会随着图片移动，设置

background-attachment:local

则背景图像会随着滚动条的移动而移动。

-webkit-box-reflect

设置倒影

img{
width: 200px;
height: 300px;
-webkit-box-reflect:  right 10px;
margin-top: 50px;
}
p{
font-size: 40px;
-webkit-box-reflect:  below 0 -webkit-linear-gradient(transparent,transparent 40%,rgba(0,0,0,0.3));
}

<p>hello hello how are you</p>
<img src="hb.jpg" alt="">

-webkit-text-stroke

设置文字的外边框

p{
font-size: 35px;
-webkit-text-stroke: 1px blue;
color:transparent;
background: linear-gradient(45deg, #f3c9c9 20%, #00c4ff 60%, yellow);
}

<p>this is  -webkit-text-stroke property</p>

-webkit-mask

设置一层神秘面纱

#div
{
width: 300px;
height: 300px;
background: url(hb.jpg);
background-size: cover;
-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
//将left top和left bottom看成两个坐标
}

-webkit-margin-collapse

避免margin重叠时使用，值为

separate

；

浮动元素不会和相邻的元素产生外边距合并；

绝对定位元素不会和相邻的元素产生外边距合并；

内联块级元素间不会产生外边距合并；

根元素间不会不会产生外边距合并（如html与body间）；

设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；

pointer-events

值为none时鼠标事件全失效。