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/a8ea737c87a4.png@100Q.jpg);
    background-blend-mode: difference;
    height: 200px;
    width: 200px;
    background-color: red;
}
背景色要写在background-blend-mod下面才有用

总结

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

相关文章

相关标签/搜索