聊聊CSS的几个新特性
$44৽ಛੑCZ!େയ
View Slide
⭇䅀伪⑭䴏犃⹑职₮㿸宝
Box Alignment Level 3实现玁䤔⁍䢤†个㱁块
实现ⷙ⢈⁍图䑧玁䤔⁍http://codepen.io/airen/full/PbpgZm | http://www.w3cplus.com/blog/tags/131.html
Box Alignment Level 3%55䣲⵰对⻬齐属㉇㗰↻₦个属㉇䝈来瑣䣲⵰内⍣佀对⻬齐㟙ㄯhttps://drafts.csswg.org/css-align/
Box Alignment Level 3justify-contentalign-contentjustify-selfalign-selfjustify-itemsalign-itemshttps://drafts.csswg.org/css-align/
http://codepen.io/airen/full/VmpNrm/
Box Alignment Level 3%55䣲⵰对⻬齐属㉇ⁿⶺ义₦这₻属㉇⥈⎖ⶣ〣⁍䢤↟䝈㟙㻵https://drafts.csswg.org/css-align/
http://codepen.io/airen/full/qqrwYZ/
CSS Grid Layoutⶣ㡏传说⁍䢤IUⶣⁿ猒(NGZDQZ.C[QWV单维〣犃ⶣ☏℅两个维テ〣犃实现两个维テ对⻬齐㟙ㄯhttps://drafts.csswg.org/css-grid/ | http://www.w3cplus.com/blog/tags/356.html
CSS Grid Layout术语共㩜ⷙ⢈共㩜项䤎共㩜线共㩜轨礼单⍣㩜共㩜区⧿共㩜间忽http://www.w3cplus.com/blog/tags/356.html
ⶺ义†个简单䢤共㩜http://codepen.io/airen/full/WopBGB/
http://codepen.io/airen/full/WopBGB/
(NGZDQZ.C[QWV〣http://codepen.io/airen/full/oYZRwp/
http://codepen.io/airen/full/oYZRwp/
共㩜䢤⎖ⶣ↟䝈㟙㻵http://codepen.io/airen/full/aBJrEw/
http://codepen.io/airen/full/aBJrEw/
共㩜䢤⎖ⶣ↟䝈㟙㻵http://codepen.io/airen/full/yVMWKe/
http://codepen.io/airen/full/yVMWKe/
共㩜䢤⎖ⶣ↟䝈㟙㻵http://codepen.io/airen/full/xRqNzX/
http://codepen.io/airen/full/xRqNzX/
CSS Shapes㑳䩔9GD⁍䨉ㆂ䣲㱁⦫䢤桰刬‴将共⻚页设计㗰╧㟐䢤泸テԋⶣ⍡许⍣佀设计㐰☬䢤ㆂ状犃ゖ‴䝈㤔吊䍖䢤㟙ㄯ让㞧环绕着⍣佀牿㞧☏℅环绕着ↀ䢤㤒线设计刬†ⶺ审㤩䤔硌边䝬犀https://drafts.csswg.org/css-shapes | http://www.w3cplus.com/blog/tags/418.html
https://drafts.csswg.org/css-shapes | http://www.w3cplus.com/blog/tags/418.html
圆ㆂ䢤㤒线〣http://codepen.io/airen/full/MbmvVL/
http://codepen.io/airen/full/MbmvVL/
圆ㆂ䢤㤒线〣http://codepen.io/airen/full/xRdLvV/
http://codepen.io/airen/full/xRdLvV/
Shapes + Clip-pathhttp://codepen.io/airen/full/dOWVae | http://www.w3cplus.com/blog/tags/431.html
http://codepen.io/airen/full/dOWVae | http://www.w3cplus.com/blog/tags/431.html
㤩条№䢤%55@meida@supports@viewporthttps://www.w3.org/TR/css3-conditional/
CSS @supports类⅜₮/QFGTPK\T䢤,5库犃"UWRRQTVU◨类⅜₮条№语★犃☏℅䝈来猥断浏览⢈牿ⷂ户䴏犀㡏♆㝏瑘%55䢤属㉇规则ԋhttps://www.w3.org/TR/css3-conditional/#at-supports | http://www.w3cplus.com/blog/tags/337.html
CSS @supports
CSS @supportshttp://codepen.io/airen/full/bwkRpX/
http://codepen.io/airen/full/bwkRpX/
CSS @supportshttp://codepen.io/airen/full/NbjwgN/
http://codepen.io/airen/full/NbjwgN/
%55吊ⶺ义属㉇%55吊ⶺ义属㉇犃◨称为%55变揯https://drafts.csswg.org/css-variables/
%55吊ⶺ义属㉇%55吊ⶺ义属㉇犃◨称为%55变揯https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/602.html
%55吊ⶺ义属㉇https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/602.html
%55吊ⶺ义属㉇↟䝈ňʼn吊ⶺ†个属㉇犃䍖☮礗过XCT␝数⥈%55规则⁍调䝈〒声㠮⮝䢤吊ⶺ义属㉇牿变揯犀https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/602.html
%55吊ⶺ义属㉇http://codepen.io/airen/full/NbjwEd/
http://codepen.io/airen/full/NbjwEd/
%55吊ⶺ义属㉇%55吊ⶺ义属㉇じ⚬%55䢤ECNE␝数†得↟䝈https://drafts.csswg.org/css-variables/ | http://www.w3cplus.com/blog/tags/172.html
%55吊ⶺ义属㉇http://codepen.io/airen/full/jMjvON/
http://codepen.io/airen/full/jMjvON/
⎖ⶣ%55㟐疣㉇
%55䀗☨㱁ㄯbackground-blend-modemix-blend-modehttp://www.w3cplus.com/blog/tags/408.html
%55䀗☨㱁ㄯhttp://codepen.io/airen/full/PbmEYG/
http://codepen.io/airen/full/PbmEYG/
%55滤镜filterbackdrop-filterhttps://www.w3.org/TR/filter-effects/ | http://www.w3cplus.com/blog/tags/119.html
http://codepen.io/airen/full/pJPWpY/
䀗☨㱁ㄯ滤镜结☨http://codepen.io/airen/full/PbmENW/ | http://bennettfeely.com/image-effects/
http://codepen.io/airen/full/PbmENW/ | http://bennettfeely.com/image-effects/
CSS element()element() 可以直接⽤来克隆HTML中任何元素https://www.w3.org/TR/css4-images/ | `http://www.w3cplus.com/css4/css-element-function.html
http://codepen.io/airen/full/RoVxgG/
CSS box-reflecthttp://www.w3cplus.com/css3/css3-box-reflect.html
琎续
THANK YOU