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时鼠标事件全失效。