目录
一、 CSS Shapes简介
1、 功能简介
2、 浏览器支持
目前支持以下版本：
二、 怎样使用CSS Shapes
1、 shape-outside属性
2、Shape的参考盒模型
三、 CSS Shapes拓展
1、 利用图片来定义一个形状
四、 Shape工具
方块套方块:这是我们网页一直以来的样子。通过使用CSS，我们一直试图摆脱这种创建几何形状的限制,但这些形状没有影响形状内的内容,或者与页面其他元素相互影响。
由Adobe在2012年中期提出的新的CSS shapes 规范 改变了这一现状。它的目标是为web设计人员提供一种新的方式，来使内容流入或者环绕在任意复杂的形状上——除了使用javascript，我们从来不曾做到这点。
直到目前为止，Web上的布局都局限于规则矩形排列，无法让内容流实现非矩形布局。
在CSS Shapes出现之前，我们或多或少的受困于矩形行列的标准布局。我们可能不得不向来自打印设计的设计者解释一下：不，我们不能让文本环绕在你裁切完美的碧昂斯的照片周围。
你想要这样：
对不起，你得到的是这样：
以下设计中，周围的文本流环绕在圆形图片周围。没有css shapes,文本将形成矩形，从而失去了元素相互之间的联系,而这个联系是可以让设计更上一层楼的。（注意这个例子中文本环绕在碗周围这个设计。）
一、CSS Shapes简介
1.功能简介
CSS Shapes使网页设计师能更好的实现自己的创意，除了简单的长方形和正方形，还可以实现任何几何图形布局。
该规范提供了两个新的CSS属性：shape-outside和shape-margin。浏览器支持这些规范是有一定道理的，尽管这些属性目前仅可以在Chrome、Opera和Safari看到效果，而且还需要带上浏览器的私有属性-webkit,因此使用的是-webkit-shape-outside和-webkit-shape-margin。
shape-outside属性将使用内容能绕着不规则几何图形排列，不在是中规中距的矩形。最初也可以让内容在一个元素内呈现，比如几何图形是一个圆形，那么文本在这个圆形内呈现，文本也将呈现成一个圆圈形状。
让文本在一个几何图形内呈现，使用的是CSS Shapes中的shape-inside属性。
2.浏览器支持
目前支持以下版本：
- Chrome 34 及以上
- Chrome Canary
- WebKit Nightly
如果正使用Chrome浏览器（非Canary版本），可以粘贴以下代码到地址栏：
chrome://flags/#enable-experimental-web-platform-features讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/120371.html