CSS3学习小结

这几日在
http://lab.iamvdo.me/houdini/
看到了很炫酷的CSS实现。看到人家实现的实在是太棒了，就想到该学学CSS了。

@support属性

@support:用来查询浏览器是否支持css新特性。
目前各大浏览器对@support的支持情况：

现代浏览器除了IE系列之外，都对@supports有很强的的支持性，甚至在移动设备上的支持度也非常好 。
使用方法：

@supports (property: value) { element { property: value; } }

如果浏览器支持property: value，将会渲染花括号里面的语句块。还有not语句，不支持的时候执行。

@supports not (property: value) { element { property: value; } }

还支持多个条件块，and，or，not。例子如下：

@supports (property1: value1) and (property2: value2) { 
element { property1: value1; property2: value2; }
 }

@supports (property1: value1) or (-webkit-property1: value1) { 
element { -webkit-property1: value1; property1: value1; }
 }

shape-outside属性

shape-outside：Allows geometric shapes to be set in CSS to define an area for text to flow around.设定元素形状，字体环绕在形状周边。
浏览器支持情况：


只有chorme，safari，opera的支持情况比较好。

具体属性介绍：

/* Keyword values */
shape-outside: none;shape-outside: margin-box;shape-outside: content-box;shape-outside: border-box;shape-outside: padding-box;

/* Function values */
shape-outside: circle();shape-outside: ellipse();shape-outside: inset(10px 10px 10px 10px);shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url> value */
shape-outside: url(image.png);

/* <gradient> value */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* Global values */
shape-outside: initial;shape-outside: inherit;shape-outside: unset;

浏览器属性支持情况：

基本特性只有chrome37,opera24,safari8.0以上版本支持。

demo：circle特性。

img{
    shape-outside: circle(50%);
    float: left;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #333;
}

必须要加float:left;后shape-outside才生效，使用和float相近的display:inlie-block也不行

demo之shape-outside:content-box

img{
     shape-outside: content-box;
    float: left;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #333;
    margin: 20px;
}

demo之shape-outside: margin-box

img {
    shape-outside: margin-box;
     float: left;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #333;
    margin: 20px;
 }

demo之shape-outside:ellipse

img {
    shape-outside: ellipse(60% 80%);
    float: left;
    overflow: hidden;
    border-radius: 60% 80% 60% 80%;
    border: 2px solid #333;
}

ellipse椭圆，只能设置两个值，和border-radius的实现方式不一样。

demo之shape-outside:inset()

img {
    shape-outside: inset(10px 20px 10px 10px);
    float: left;
    overflow: hidden;
    border-radius: 60% 80% 60% 80%;
    border: 2px solid #333;
}

mix-blend-mode

mix-blend-mode:

The mix-blend-mode CSS property describes how an element's content should blend with the content of the element's direct parent and the element's background.

元素内容和元素的直接父元素以及元素的背景混合。
浏览器兼容情况：

各属性含义：

demo：

p {
 color: black;
 font-size: 40px;
 position: absolute;
 margin-top: -300px;
 height: 200px;
 width: 800px;
 mix-blend-mode: overlay;
}
img{
 width:400px;
}

不设置mix-blend-mode的图片对比：

background-blend-mode

background-blend-mode：可以是背景图片间的混合，也可以是背景图片和背景色的混合。
浏览器兼容性：

demo：背景图+背景色的混合

div {
    /* background-color: red; //背景色要写在下面才有用*/
    color: black;
     font-size: 40px;
     background: url(https://pic.mdcdn.cn/h5/pic/201703/[e-mail]);
    background-blend-mode: difference;
    height: 200px;
    width: 200px;
    background-color: red;
}

背景色要写在background-blend-mod下面才有用

总结

@support的支持度很高，在使用其他三个属性之前可以用@support先进行查询。shape-outside可以实现很好看的文字环绕效果。mix-blend-mode和background-blend-mode测试的效果看着都不好看，还是需要设计师的配合才能做出好看的效果。