摘要：看到人家实现的实在是太棒了，就想到该学学了。属性用来查询浏览器是否支持新特性。还有语句，不支持的时候执行。还支持多个条件块，，，。浏览器支持情况只有，，的支持情况比较好。
这几日在
http://lab.iamvdo.me/houdini/
看到了很炫酷的CSS实现。看到人家实现的实在是太棒了，就想到该学学CSS了。
@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); /*value */ shape-outside: url(image.png); /* 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以上版本支持。
img{
shape-outside: circle(50%);
float: left;
overflow: hidden;
border-radius: 50%;
border: 1px solid #333;
}
img{
shape-outside: content-box;
float: left;
overflow: hidden;
border-radius: 50%;
border: 1px solid #333;
margin: 20px;
}
img {
shape-outside: margin-box;
float: left;
overflow: hidden;
border-radius: 50%;
border: 1px solid #333;
margin: 20px;
}
img {
shape-outside: ellipse(60% 80%);
float: left;
overflow: hidden;
border-radius: 60% 80% 60% 80%;
border: 2px solid #333;
}
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.
元素内容和元素的直接父元素以及元素的背景混合。
浏览器兼容情况：
各属性含义：
p {
color: black;
font-size: 40px;
position: absolute;
margin-top: -300px;
height: 200px;
width: 800px;
mix-blend-mode: overlay;
}
img{
width:400px;
}
background-blend-mode：可以是背景图片间的混合，也可以是背景图片和背景色的混合。
浏览器兼容性：
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;
}
@support的支持度很高，在使用其他三个属性之前可以用@support先进行查询。shape-outside可以实现很好看的文字环绕效果。mix-blend-mode和background-blend-mode测试的效果看着都不好看，还是需要设计师的配合才能做出好看的效果。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112710.html
摘要：一丶方法可以细化操作，回调方法，但是在移动端安卓卡顿二丶可以用细化过渡效果，没有回调操作，只能监控是否已完成。会存在过度绘制，会造成帧丢失，继而导致动画断续显示。 一丶jq/zepto animate()方法 可以细化操作，回调方法，但是在移动端（安卓）卡顿 二丶css3 animation 可以用@keyframes细化过渡效果，没有回调操作，只能监控animation/transi...
摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习 前端方向，自学，vue技术栈 时间背景 大概是在11月9日准备...
摘要：背景个人背景就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习前端方向，自学，技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多，投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗，待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业，现大四，北京实习 前端方向，自学，vue技术栈 时间背景 大概是在11月9日准备...
阅读 1466·2021-08-30 09:45
阅读 1564·2019-08-30 15:54
阅读 1063·2019-08-30 14:02
阅读 1697·2019-08-29 16:21
阅读 1469·2019-08-29 13:47
阅读 3045·2019-08-29 12:27
阅读 574·2019-08-29 11:01
阅读 2529·2019-08-26 14:04
