这几天在http://lab.iamvdo.me/houdini/看到一个很酷的CSS实现。看到他们取得了如此巨大的成就，我认为是时候学习CSS了。@support属性@support：用于查询浏览器是否支持新的css特性。目前主流浏览器都支持@support：现代浏览器，除了IE系列，都对@supports有很强的支持，即使在移动设备上也是如此。使用方法：@supports(property:value){element{property:value;}}如果浏览器支持property:value，就会渲染花括号内的语句块。还有一个not语句，不支持时执行。@supportsnot(property:value){element{property:value;}}还支持多个条件块，and，or，not。示例如下：@supports(property1:value1)and(property2:value2){element{property1:value1;属性2：值2；}}@supports(property1:value1)or(-webkit-property1:value1){element{-webkit-property1:value1;属性1：值1；}}shape-outside属性shape-outside：允许在CSS中设置几何形状来定义文本流动的区域。设置元素的形状，字体环绕形状。浏览器支持：只有chorme、safari和opera支持更好。具体属性介绍：/*关键字值*/shape-outside:none;shape-outside:margin-box;shape-outside:content-box;shape-outside:border-box;shape-outside:padding-box;/*函数值*/shape-outside:circle();shape-outside:ellipse();shape-outside:inset(10px10px10px10px);shape-outside:polygon(10px10px,20px20px,30px30px);/*值*/shape-outside:url(image.png);/*值*/shape-outside:linear-gradient(45deg,rgba(255,255,255,0)150px,red150px);/*全局值*/shape-outside:initial;shape-outside:inherit;shape-outside:unset;浏览器属性支持：基础特性仅chrome37,opera24,safari8.0支持多于。演示：圆形功能。img{外形：圆形（50%）；向左飘浮;溢出：隐藏；边界半径：50%；border:1pxsolid#333;}必须加上float:left;shape-outside生效后，使用Display:inlie-block，类似于float，不起作用。演示的shape-outside:content-boximg{shape-outside:content-box;向左飘浮;溢出：隐藏；边界半径：50%；边框：1px实心#333；margin:20px;}demo的shape-outside:margin-boximg{shape-outside:margin-box;向左飘浮;溢出：隐藏；边界半径：50%；边框：1px实心#333；边距：20px；}演示的shape-outside:ellipseimg{shape-outside:ellipse(60%80%);向左飘浮;溢出：隐藏；边界半径：60%80%60%80%；border:2pxsolid#333;}ellipseellipse只能设置两个值，与border-radius的实现不同。演示的shape-outside:inset()img{shape-outside:inset(10px20px10px10px);向左飘浮;溢出：隐藏；边界半径：60%80%60%80%；border:2pxsolid#333;}mix-blend-modemix-blend-mode:mix-blend-modeCSS属性描述元素的内容应该如何与元素的直接父元素的内容和元素的背景混合。背景融合。浏览器兼容性：各属性含义：demo:p{color:black;字体大小：40px；位置：绝对；边距顶部：-300px；高度：200px；宽度：800px；混合混合模式：叠加；}img{width:400px;}没有mix-blend-mode的图片对比：background-blend-modebackground-blend-mode:可以是背景图片的混合，也可以是背景图片和背景颜色的混合。浏览器兼容性：demo:背景图片+背景色混合div{/*background-color:red;//背景色一定要写在下面才有用*/color:black;字体大小：40px；背景：url(https://pic.mdcdn.cn/h5/pic/201703/a8ea737c87a4.png@100Q.jpg);背景混合模式：差异；高度：200px；宽度：200px；background-color:red;}backgroundcolor写在background-blend-mod下很有用。总而言之，@support的支持度很高。您可以在使用其他三个属性之前使用@support进行查询。shape-outside可以实现很好的文字环绕效果。mix-blend-mode和background-blend-mode测试的结果都不好看，还是需要设计师的配合才能做出好看的效果。
