CSS 形状外部形状：url；浮动不一致

Question

当我使用 shape-outside: url(anyimage.png) 并将其向右浮动时，它周围的文字按预期很好地环绕，但是当我向左浮动时，右边的文字环绕在 a 的边缘矩形。

知道为什么会这样吗？我尝试了几种透明形状，当图像向右浮动时文本很好地环绕，但当它向左浮动时，文本默认环绕一个矩形。

知道这是否是已知错误吗？我正在使用最新版本的 Chrome (46.0.2490.86 m) 并且只对 Chrome.

上的实现感兴趣

附上浮动问题的图片

这也是圆圈 png

的图像

这里是 CSS:

.element{
  width:200px;
  height:200px;
  float:right;
  shape-outside: url("circle_new.png");
  shape-image-threshold: 0px;
  shape-margin: 10px;
}

**

在第一次回复后添加：让我澄清一下，我正在寻找 shape-outside: url 不一致行为的原因。我知道我可以很好地使用第一个答案指出的 circle()，但我 希望它适用于所有形状 ，这就是为什么我要专门寻求启发shape-outside: url.

期

Answer 1

如果您的目标是让文字环绕一个圆圈，您应该使用 circle() 作为外部形状属性 :

p{
  width:400px;
  text-align:justify;
}
.element {
    width:200px;
    height:200px;
    float:right;
    shape-outside: circle(50%);
    shape-image-threshold: 0px;
    shape-margin: 10px;
    background-image:url('http://i.stack.imgur.com/gtBMS.png');
    background-size:contain;
}

p+p .element{
    float:left;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis quam ex. Fusce sagittis purus mi, ut volutpat lorem venenatis id. In varius sodales dui ut molestie. <span class="element"></span>
Phasellus pretium metus id massa volutpat, sed gravida nisl fringilla. Quisque eu gravida lacus, in mollis risus. Duis et est sodales, iaculis mi et, scelerisque elit. Vivamus in massa at lectus hendrerit condimentum. Curabitur nec dignissim turpis, elementum viverra urna. In hac habitasse platea dictumst. Nunc eget ullamcorper augue. Aliquam sit amet quam feugiat, finibus lacus ac, luctus mi. In quis leo nec lectus porttitor pulvinar mollis vitae tellus. Fusce turpis quam, fringilla at aliquam sit amet, porta ac purus. Suspendisse ac faucibus dolor. Aliquam erat volutpat. Nam mauris metus, pharetra vitae velit eu, suscipit molestie odio.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis quam ex. Fusce sagittis purus mi, ut volutpat lorem venenatis id. In varius sodales dui ut molestie. <span class="element"></span>
Phasellus pretium metus id massa volutpat, sed gravida nisl fringilla. Quisque eu gravida lacus, in mollis risus. Duis et est sodales, iaculis mi et, scelerisque elit. Vivamus in massa at lectus hendrerit condimentum. Curabitur nec dignissim turpis, elementum viverra urna. In hac habitasse platea dictumst. Nunc eget ullamcorper augue. Aliquam sit amet quam feugiat, finibus lacus ac, luctus mi. In quis leo nec lectus porttitor pulvinar mollis vitae tellus. Fusce turpis quam, fringilla at aliquam sit amet, porta ac purus. Suspendisse ac faucibus dolor. Aliquam erat volutpat. Nam mauris metus, pharetra vitae velit eu, suscipit molestie odio.</p>

请注意，我还添加了 text-align:justify;，因此文字更接近右侧的形状

Answer 2

在这两种情况下，文本都没有完全右对齐。这种行为是正常的。文本从左侧的同一点开始，在右侧的不同点结束，因为每行的长度不同。真的跟你的形象没多大关系。

解决此问题的最佳方法是使用 shape-outside: circle(); 并在 circle() 中设置适当的数字参数。希望对您有所帮助。

Answer 3

你有一个语法错误

.element{
  width:200px;
  height:200px;
  float:right;
  shape-outside: url("circle_new.png");
  shape-image-threshold: 0px;   /* error */
  shape-image-threshold: 0;  /* in the range 0 - 1 */
  shape-margin: 10px;
}

因为您没有 post 示例，所以很难判断，但是这个属性受跨域问题的影响。所以另一个可能的问题是图像被屏蔽了。

你检查过控制台了吗？

请注意，您看到图像并不意味着它没有被挡在外面的形状中 url

CSS 形状外部形状：url；浮动不一致

CSS Shapes shape-outside: url; float inconsistency

css

css-shapes