CSS shape-margin，shape-outside 不起作用答案

【问题标题】：CSS shape-margin, shape-outside not workingCSS shape-margin，shape-outside 不起作用
【发布时间】：2016-02-09 22:56:08
【问题描述】：

CSS shape-margin 和 shape-outside 在我的系统上不起作用。我正在使用最新版本的 Chrome。我唯一能想到的就是我的操作系统是 Windows 7。这应该是个问题吗？

这里是JSFiddle。但是，由于它可能只是在您在系统上看到它时才起作用，所以下面是它在我的系统上的样子。如果有人能指导我解决这个问题（不涉及升级我的操作系统，但看到预期的风格），我将不胜感激。

我正在使用以下代码：

<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>

【问题讨论】：

标签： css css-shapes

【解决方案1】：

shape-outside 和 shape-margin 的形状是如何创建的？

shape-outside property's reference box is always the margin-box of the element。因此，当使用shape-outside 属性绘制假想圆时，它是根据元素的大小加上其边距来绘制的。形状绘制完成后，shape-margin 属性将用于在其外部绘制更大的形状。

下面的屏幕截图显示了它们的实际创建方式。最内圈是实际图像，与内圈稍有偏移的浅蓝色是使用 shape outside 属性创建的实际形状。它与实际的圆形略有偏移，因为再次引用的是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:

请记住，形状最终被限制在元素的边距框（元素加上其周围的边距）

在下面的屏幕截图中，黑色方块（使用伪 + 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 来完成，如下面的sn-p。

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 来完成，如下面的 sn-p 所示。

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>

注意：在上面的sn-p中实际上有一个圆形的边距，但是看不清楚，因为这么大的圆的一部分总是几乎是一条直线。您可以通过开发工具看到圆圈。

【讨论】：

【解决方案2】：

看起来好像是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>

【讨论】：

打败我吧——尽管 MDN 说 Chrome 支持shape-margin，但它只有在应用常规边距时才有效。
如果您使用开发工具检查，您会发现它使形状变大，而不是实际在其周围留出边距
@Turnip - 是的，这绝对是它 - 有效。也感谢您提供解决方案！

【解决方案3】：

免责声明： shape-outside 属性不应在实际项目中使用¹。它可能会受到不良行为的影响。

问题似乎来自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>

¹_{CSS Shapes Module Level 1 实际上（2015 年 7 月）的状态为“候选人推荐”。由于这意味着它是一项正在进行的工作，它可能随时更改，因此不应用于测试以外的其他用途。}

【讨论】：

【解决方案4】：

可能是您使用的图像存在问题，但这似乎在 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>

【讨论】：

谢谢，但实际上您输入的图像周围有一个非常清晰的方形背景；我选择的图像我在 Photoshop 中检查了它的背景 - 它是透明的，所以这不应该是问题。另外，我确实需要形状边距。
正如我所说，它在 Chrome 中对我来说可以正常工作。如果它不适合您，则可能是浏览器问题或前缀。