CSS形状边距，外形不起作用

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 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创建的形状将始终限制为元素的margin-box，因此除此之外的任何内容都将被剪裁。在这个例子中，整个形状在元素的margin-box之外，因此我们看到的最终只是一个正方形。

以上内容为this HTML5Rocks article：

  

请记住，形状最终被约束到元素的边框（元素加上其边缘）

在下面的屏幕截图中，黑色方块（使用伪+ a div包装器创建）表示img的边框区域。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

那么，解决方案是什么？

这意味着shape-margin正常工作时，应创建更大的圆圈（边距参考），使其包含在元素的边距框中。< / p>

选项1：将形状边距设置为低于margin-right

这可以通过将shape-margin设置为小于下面代码段中的margin-right来完成。

＆＃13;

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

选项2：将margin-right设置为大于shape-margin

或者，可以通过设置大于margin-right值的shape-margin来完成，如下面的代码段所示。

＆＃13;

＆＃13;

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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但第二个选项的问题是随着margin-right的增加，形状的半径也会增加，因为margin-box是参考，所以shape-margin必须非常非常小于margin-right。

选项3：将外部参考形状设置为边框，形状边距与边距右设置

或者，另一种选择是将shape-outside属性的引用框设置为border-box元素的img。这意味着形状的大小不会受到边缘的影响。

将border-box设置为shape-outside属性的参考的另一个好处是，不会在偏移处绘制形状（因为边距不会对其产生影响）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

  

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

Answer 2

好像shape-margin在这里引起了问题。我必须承认，这不是我之前尝试过的事情，但使用普通margin代替shape-margin似乎有效：

＆＃13;

＆＃13;

img {
  float: left;
  max-height: 5em;
  margin: 0.5em 0.5em 0.5em 0;
  -webkit-shape-outside: circle(50%);
  shape-outside: circle(50%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

  

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

问题似乎来自shape-margin比图像边界大得多的事实。正如您在此示例中所看到的，形状边距有效：

＆＃13;

＆＃13;

img {
  float: left;
  max-height: 5em;
  -webkit-shape-margin:1em;
  shape-margin:1em;
  -webkit-shape-outside: circle(25%);
  shape-outside: circle(25%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果你需要一个大的形状边距，你可以将图像包装在div中，并将形状外部和形状边缘的特性应用于div：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

¹ _{CSS Shapes Module Level 1实际（2015年7月）的状态为＃34;候选推荐＆＃34;。因为这意味着它正在进行中，它可能随时发生变化，因此不应用于测试之外。}

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