CSS Shapes shape-outside：url;浮动不一致

Question

当我使用shape-outside: url(anyimage.png)并将其浮动到右侧时，它周围的文本按预期包装得很好，但是当我向左浮动它时，右边的文本环绕着矩形的边缘。

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

知道这是否是已知错误？我使用的是最新版本的Chrome（46.0.2490.86米），只对 Chrome 的实施感兴趣。

这是附加浮动问题的图像

这里还有圆圈图像

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

如果你的目的是让文字环绕一个圆圈，你应该使用 select * from ( select T1.id as Row, T3.column, T2.value from table1 T1 left join table2 T2 on T2.table1_id = T1.id left join table3 T3 on T3.column_id = T2.column_id ) pivot ( sum(value) for value in ('column1','column2','column3') ) group by row order by row 作为外形的外部属性：

＆＃13;

＆＃13;

circle()

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请注意，我还添加了<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>，因此文字更接近右侧的形状

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

由于您没有发布示例，因此很难说，但此属性受到跨源问题的影响。因此另一个可能的问题是图像被阻挡。

你检查了控制台吗？

请注意，您看到图片的事实并不意味着它没有在形状外部网址中被阻止