• 2012年中旬，Adobe提出CSS Shape规范
• 目标：提供一种新的方式，改变任意复杂形状周围或者内部内容布局。
• 目前只有Webkit Nightly和Chrome Canary支持CSS Shape，但是它的Model Level 1已经是Candidate Recommendation（候选推荐）了，因此在规范中定义的属性和语法已经很稳定。

• shape-outside：限制形状周围的内容
• shape-inside：限制形状内部的内容

• circle()
• ellipse()
• inset()
• polygon()
• url(...)

• 元素必须是浮动的。新版的CSS Shape可以允许我们定义一个非浮动元素的形状，但是现在还不行；
• 元素必须有确定的尺寸。元素的宽度和高度被用来建立这个元素上的坐标系统。
• shape-outside可以满足响应式布局，shape-inside还不是，它被推迟到了Module Level 2中。

• SHAPES
• CSS Shapes Module Level 1
• 深入浅出 CSS Shape
• CSS Shapes：打破矩形设计的限制
• 配置浏览器支持新特性
• Shape工具

混合模式是指将上层的图像融入下层图像时采用的各种模式。根据您所选择的模式，你会看到不同的融合后的效果。

• background-blend-mode的值可以设置为：Multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity 和 normal。
• 测试用例1
• 测试用例2
• 测试用例3

• BLEND MODES
• CSS混合模式

• SVG(Scalable Vector Graphics，可缩放矢量图形)，XML语言的一种,用于描述二维矢量图形的一种图形格式。
• 2003年1月，SVG 1.1 被确立为 W3C 标准。
• SVG 与其他标准（比如 XSL 和 DOM）相兼容。

• 测试用例

• SVG
• SVG Tutorial
• Splash Vector Graphics on your Responsive Site
• Rethinking Responsive SVG

• 该模块提供了一个先进的内容流机制，允许页面中的内容指向任意区域，即页面文档流可以不连续。
• 涉及到的属性：flow-into | flow-from

<div class="myRegion"></div>
<div class="myRegion"></div>
<div class="myRegion"></div>

<div id="myContent">...</div>

#myContent {
    flow-into: myNamedFlow;
}

.myRegion {
    flow-from: myNamedFlow;
}

• REGIONS
• Using CSS Regions With CSS Shapes For A Better Reading Experience
• Killer Responsive Layouts With CSS Regions
• CSS Regions Matter