資訊專欄INFORMATION COLUMN
摘要：看到人家實現的實在是太棒了，就想到該學學了。屬性用來查詢瀏覽器是否支持新特性。還有語句，不支持的時候執行。還支持多個條件塊，，，。瀏覽器支持情況只有，，的支持情況比較好。
這幾日在
http://lab.iamvdo.me/houdini/
看到了很炫酷的CSS實現?？吹饺思覍崿F的實在是太棒了，就想到該學學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測試的效果看著都不好看，還是需要設計師的配合才能做出好看的效果。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112710.html
摘要：一丶方法可以細化操作，回調方法，但是在移動端安卓卡頓二丶可以用細化過渡效果，沒有回調操作，只能監控是否已完成。會存在過度繪制，會造成幀丟失，繼而導致動畫斷續顯示。 一丶jq/zepto animate()方法 可以細化操作，回調方法，但是在移動端（安卓）卡頓 二丶css3 animation 可以用@keyframes細化過渡效果，沒有回調操作，只能監控animation/transi...
摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗，待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習 前端方向，自學，vue技術棧 時間背景 大概是在11月9日準備...
摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習前端方向，自學，技術棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經結束招聘崗位不多，投遞對象為大一些的互聯網公司事件背景第一個入職的是好未來的前端實習崗，待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業，現大四，北京實習 前端方向，自學，vue技術棧 時間背景 大概是在11月9日準備...
閱讀 1699·2021-08-30 09:45
閱讀 1754·2019-08-30 15:54
閱讀 1175·2019-08-30 14:02
閱讀 1930·2019-08-29 16:21
閱讀 1614·2019-08-29 13:47
閱讀 3196·2019-08-29 12:27
閱讀 701·2019-08-29 11:01
閱讀 2665·2019-08-26 14:04
