CSS shape-margin, shape-outside 不起作用
CSS shape-margin, shape-outside not working
CSS shape-margin 和 shape-outside 在我的系统上不工作。我使用的是 Chrome 的最新版本。我唯一能想到的是我的 OS 是 Windows 7. 这应该是个问题吗？
这里是JSFiddle。然而，由于当您在系统上看到它时它可能正在工作，下面是它在我的系统上的样子。如果有人能指导我解决这个问题（这不涉及升级我的 OS，但仍能看到预期的风格），我将不胜感激。
我正在使用以下代码：
<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png"
style="float: left; max-height: 5em; margin-right: 0.5em;
-webkit-shape-margin: 12em; shape-margin: 12em;
-webkit-shape-outside: circle(50%); shape-outside: circle(50%);">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
可能是您使用的图像有问题，但这似乎有效...在 Chrome。
删除这个也有帮助：
-webkit-shape-margin: 12em;
shape-margin: 12em;
img {
width: 5em;
height: auto;
min-width: 150px;
float: left;
margin-right: 2rem;
border-radius: 50%;
-webkit-shape-outside: circle();
shape-outside: circle();
}
<h2>Example of shape margin</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/kiwifruit-on-a-plate.jpg" alt="A photograph of sliced kiwifruit on a while plate" />
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
看起来好像是 shape-margin 导致了这里的问题。我必须承认这不是我以前尝试过的东西，但使用普通 margin 而不是 shape-margin 似乎可行：
img {
float: left;
max-height: 5em;
margin: 0.5em 0.5em 0.5em 0;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
Disclaimer : The shape-outside property should not be used in live projects1. It may be subject to undesired behaviours.
问题似乎是因为 shape-margin 比图像的边界大得多。正如您在此示例中所见，形状边距有效：
img {
float: left;
max-height: 5em;
-webkit-shape-margin:1em;
shape-margin:1em;
-webkit-shape-outside: circle(25%);
shape-outside: circle(25%);
}
<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
如果你需要一个大的 shape-margin，你可以将图像包裹在 div 中并将 shape-outside 和 shape-margin 属性应用到 div :
.img {
float: left;
-webkit-shape-margin: 3.5em;
shape-margin: 3.5em;
-webkit-shape-outside: circle(2.5em);
shape-outside: circle(2.5em);
}
.img img{
max-height:5em;
margin:3.5em;
}
<h2>Example of shape margin</h2>
<div class="img">
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png">
</div>
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
1CSS Shapes Module Level 1 实际上（2015 年 7 月）的状态为 "Candidate Recommendation"。因为这意味着它是一项正在进行的工作，它可能随时更改，因此除了测试之外不应使用。
shape-outside 和 shape-margin 的形状是如何创建的？
shape-outside property's reference box is always the margin-box of the element。所以当用 shape-outside 属性 绘制假想圆时，它是根据元素的大小加上它的边距来绘制的。绘制形状后，shape-margin 属性 用于在其外部绘制更大的形状。
下面的截图显示了它们是如何创建的。最里面的圆圈是实际图像，较浅的蓝色圆圈稍微偏离内圈是使用外面的形状创建的实际形状 属性。它与实际圆形略有偏移，因为再次引用是 margin-box，并且由于您只设置了 margin-right，它会向右偏移。大外圈是根据shape-margin属性画出来的形状。该圆的半径为 12em + .25em (margin-right/2) + 元素的实际大小（大约 80px x 80px）。
对于为 shape-margin 创建的假想形状可以有多大有限制吗？
现在，需要注意的关键是 shape-margin 创建的形状将始终限制在元素的 margin-box 范围内，因此超出它的任何内容都会被剪裁。在这个例子中，整个形状都在元素的 margin-box 之外，因此我们看到的最终只是一个正方形。
上面的来源是this HTML5Rocks article:
Remember, the shape is ultimately constrained to the element’s margin-box (the element plus its surrounding margin)
在下面的屏幕截图中，黑色方块（使用伪 + div 包装器创建）表示 img.
的边距框区域
img {
float: left;
max-height: 5em;
margin-right: .5em;
-webkit-shape-margin: 12em;
shape-margin: 12em;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
/* added just to indicate where margin box ends */
div {
position: relative;
}
div:after {
position: absolute;
content: '';
height: 80px;
width: calc(.5em + 80px); /* 80px is width of element + .5em margin */
border: 1px solid;
top: 0px;
left: 0px;
}
<h2>Example of shape margin</h2>
<div>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style="">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</div>
那么，解决方案是什么？
这意味着要使 shape-margin 正常工作，应创建更大的圆圈（边距参考），使其 包含在边距框内 元素的。
选项 1：将 shape-margin 设置为低于 margin-right
这可以通过设置 shape-margin 使其小于下面代码段中的 margin-right 来完成。
img {
float: left;
max-height: 5em;
margin-right: .5em;
-webkit-shape-margin: .15em;
shape-margin: .15em;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style="">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
选项 2：设置 margin-right 大于 shape-margin
或者，可以通过设置比 shape-margin 值大的 margin-right 来完成，如以下代码片段所示。
img {
float: left;
max-height: 5em;
margin-right: 2.5em;
-webkit-shape-margin: .25em;
shape-margin: .25em;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style="">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
但是第二个选项的问题是，随着 margin-right 的增加，形状的半径也会增加，因为 margin-box 是参考，所以 shape-margin 必须非常非常小于margin-right。
选项3：设置shape outside的参考为border-box，shape-margin与margin-right相同
或者，另一种选择是将 shape-outside 属性 的引用框设置为 img 元素的 border-box。这意味着形状的大小不会受到边距的影响。
将 border-box 设置为 shape-outside 属性 的参考的另一个优点是形状不会在偏移处绘制（因为边距再次不影响它）。
img {
float: left;
max-height: 5em;
margin-right: 12em;
-webkit-shape-margin: 12em;
shape-margin: 12em;
-webkit-shape-outside: circle(50%) border-box;
shape-outside: circle(50%) border-box;
}
<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style="">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
Note: There is actually a circular shape margin in the above snippet but that is not seen clearly because a portion of such a large circle is invariably almost a straight line. You can see the circle through Dev tools.
CSS shape-margin 和 shape-outside 在我的系统上不工作。我使用的是 Chrome 的最新版本。我唯一能想到的是我的 OS 是 Windows 7. 这应该是个问题吗？
这里是JSFiddle。然而，由于当您在系统上看到它时它可能正在工作，下面是它在我的系统上的样子。如果有人能指导我解决这个问题（这不涉及升级我的 OS，但仍能看到预期的风格），我将不胜感激。
我正在使用以下代码：
<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png"
style="float: left; max-height: 5em; margin-right: 0.5em;
-webkit-shape-margin: 12em; shape-margin: 12em;
-webkit-shape-outside: circle(50%); shape-outside: circle(50%);">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
可能是您使用的图像有问题，但这似乎有效...在 Chrome。
删除这个也有帮助：
-webkit-shape-margin: 12em;
shape-margin: 12em;
img {
width: 5em;
height: auto;
min-width: 150px;
float: left;
margin-right: 2rem;
border-radius: 50%;
-webkit-shape-outside: circle();
shape-outside: circle();
}
<h2>Example of shape margin</h2>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/kiwifruit-on-a-plate.jpg" alt="A photograph of sliced kiwifruit on a while plate" />
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
看起来好像是 shape-margin 导致了这里的问题。我必须承认这不是我以前尝试过的东西，但使用普通 margin 而不是 shape-margin 似乎可行：
img {
float: left;
max-height: 5em;
margin: 0.5em 0.5em 0.5em 0;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
Disclaimer : The shape-outside property should not be used in live projects1. It may be subject to undesired behaviours.
问题似乎是因为 shape-margin 比图像的边界大得多。正如您在此示例中所见，形状边距有效：
img {
float: left;
max-height: 5em;
-webkit-shape-margin:1em;
shape-margin:1em;
-webkit-shape-outside: circle(25%);
shape-outside: circle(25%);
}
<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
如果你需要一个大的 shape-margin，你可以将图像包裹在 div 中并将 shape-outside 和 shape-margin 属性应用到 div :
.img {
float: left;
-webkit-shape-margin: 3.5em;
shape-margin: 3.5em;
-webkit-shape-outside: circle(2.5em);
shape-outside: circle(2.5em);
}
.img img{
max-height:5em;
margin:3.5em;
}
<h2>Example of shape margin</h2>
<div class="img">
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png">
</div>
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
1CSS Shapes Module Level 1 实际上（2015 年 7 月）的状态为 "Candidate Recommendation"。因为这意味着它是一项正在进行的工作，它可能随时更改，因此除了测试之外不应使用。
shape-outside 和 shape-margin 的形状是如何创建的？
shape-outside property's reference box is always the margin-box of the element。所以当用 shape-outside 属性 绘制假想圆时，它是根据元素的大小加上它的边距来绘制的。绘制形状后，shape-margin 属性 用于在其外部绘制更大的形状。
下面的截图显示了它们是如何创建的。最里面的圆圈是实际图像，较浅的蓝色圆圈稍微偏离内圈是使用外面的形状创建的实际形状 属性。它与实际圆形略有偏移，因为再次引用是 margin-box，并且由于您只设置了 margin-right，它会向右偏移。大外圈是根据shape-margin属性画出来的形状。该圆的半径为 12em + .25em (margin-right/2) + 元素的实际大小（大约 80px x 80px）。
对于为 shape-margin 创建的假想形状可以有多大有限制吗？
现在，需要注意的关键是 shape-margin 创建的形状将始终限制在元素的 margin-box 范围内，因此超出它的任何内容都会被剪裁。在这个例子中，整个形状都在元素的 margin-box 之外，因此我们看到的最终只是一个正方形。
上面的来源是this HTML5Rocks article:
Remember, the shape is ultimately constrained to the element’s margin-box (the element plus its surrounding margin)
在下面的屏幕截图中，黑色方块（使用伪 + div 包装器创建）表示 img.
img {
float: left;
max-height: 5em;
margin-right: .5em;
-webkit-shape-margin: 12em;
shape-margin: 12em;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
/* added just to indicate where margin box ends */
div {
position: relative;
}
div:after {
position: absolute;
content: '';
height: 80px;
width: calc(.5em + 80px); /* 80px is width of element + .5em margin */
border: 1px solid;
top: 0px;
left: 0px;
}
<h2>Example of shape margin</h2>
<div>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style="">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</div>
那么，解决方案是什么？
这意味着要使 shape-margin 正常工作，应创建更大的圆圈（边距参考），使其 包含在边距框内 元素的。
选项 1：将 shape-margin 设置为低于 margin-right
这可以通过设置 shape-margin 使其小于下面代码段中的 margin-right 来完成。
img {
float: left;
max-height: 5em;
margin-right: .5em;
-webkit-shape-margin: .15em;
shape-margin: .15em;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style="">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
选项 2：设置 margin-right 大于 shape-margin
或者，可以通过设置比 shape-margin 值大的 margin-right 来完成，如以下代码片段所示。
img {
float: left;
max-height: 5em;
margin-right: 2.5em;
-webkit-shape-margin: .25em;
shape-margin: .25em;
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
}
<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style="">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
但是第二个选项的问题是，随着 margin-right 的增加，形状的半径也会增加，因为 margin-box 是参考，所以 shape-margin 必须非常非常小于margin-right。
选项3：设置shape outside的参考为border-box，shape-margin与margin-right相同
或者，另一种选择是将 shape-outside 属性 的引用框设置为 img 元素的 border-box。这意味着形状的大小不会受到边距的影响。
将 border-box 设置为 shape-outside 属性 的参考的另一个优点是形状不会在偏移处绘制（因为边距再次不影响它）。
img {
float: left;
max-height: 5em;
margin-right: 12em;
-webkit-shape-margin: 12em;
shape-margin: 12em;
-webkit-shape-outside: circle(50%) border-box;
shape-outside: circle(50%) border-box;
}
<h2>Example of shape margin</h2>
<img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style="">
<p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem
ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
Note: There is actually a circular shape margin in the above snippet but that is not seen clearly because a portion of such a large circle is invariably almost a straight line. You can see the circle through Dev tools.