CSS shape-margin、shape-outside 不起作用

Question

CSS 形状边距 和 外型不适用于我的系统。我正在使用最新版本的 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>

Answer 1

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

shape-outside property's reference box is always the margin-box of the element .所以当用 shape-outside 绘制虚圆时属性，它是根据元素的大小加上它的边距来绘制的。绘制形状后，shape-margin然后使用属性在其外部绘制更大的形状。

下面的屏幕截图显示了它们是如何实际创建的。最内圈是实际图像，从内圈稍微偏移的浅蓝色是使用 shape 外部属性创建的实际形状。它与实际的圆形略有偏移，因为再次引用的是 margin-box因为你只设置了一个 margin-right ，它会向右偏移。大外圆是根据shape-margin绘制的形状属性(property)。这个圆的半径将是 12em + .25em(margin-right/2)+ 元素的实际大小(大约 80px x 80px)。



为形状边距创建的假想形状有多大限制？

现在，要注意的关键是由 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

或者，可以通过设置 margin-right 来完成。大于 shape-margin像下面的代码片段一样的值。

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 的引用框属性(property)到 border-box的 img元素。这意味着形状的大小不会受到边距的影响。

设置的另一个优点 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.