CSS Shapes-shape-outside：url; 浮动不一致
烈火抄写员
当我使用shape-outside: url(anyimage.png)它并向右浮动它时，其周围的文本将按预期很好地环绕，但是当我将其漂浮到左侧时，右侧的文本将环绕一个矩形的边缘。
知道为什么会这样吗？我尝试了几种透明形状，当图像向右浮动时，文本很好地环绕，但是当图像向左浮动时，文本默认为环绕矩形的环绕。
知道这是否是已知错误吗？我使用的是最新版本的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。
错误的
您有语法错误
.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;
}
由于您没有发布示例，因此很难说出来，但是此属性存在跨域问题。因此，另一个可能的问题是图像被遮挡。
您检查过控制台了吗？
请注意，您看到图像的事实并不意味着它没有在形状外部URL中被阻止
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用 CSS 显示图像：内容 url 不一致
- 2
资格与CSS不一致
- 3
Bootstrap / CSS - 修复右浮动图像的跨浏览器边距不一致
- 4
CSS：input ['submit']高度不一致
- 5
chrome中的CSS转换悬停不一致
- 6
CSS-Linter与美化器不一致
- 7
SVG CSS动画不一致
- 8
通过更新处理CSS过渡不一致
- 9
CSS在特定设备上不一致？
- 10
CSS盒子阴影不一致
- 11
通过JavaScript应用不一致的CSS
- 12
CSS行为与：target不一致
- 13
location.replace与URL片段不一致
- 14
将darray存储到Shape中时出现不一致的错误
- 15
平均浮动不一致
- 16
浮动与Unity不一致
- 17
Rspec + Capybara + Ember出现不一致的“无法找到CSS”错误
- 18
Jekyll在Github Pages上不一致地应用CSS样式
- 19
Chrome与IE / Firefox中CSS悬停效果不一致
- 20
Windows Server 2008 IIS7 CSS不一致地工作
- 21
CSS-EM值不一致，如何调试/解释
- 22
带有CSS Grid的Div在chrome和firefox中表现不一致
- 23
不同屏幕尺寸的CSS网格图像库布局底部基线不一致
- 24
Flexbox CSS与字段集不一致，Firefox与Chrome
- 25
当顶级项目不是div时，CSS Grid格式不一致
- 26
CSS-EM值不一致，如何调试/解释
- 27
当尺寸是相对的时，CSS flex 项目的尺寸的不一致行为
- 28
Eclipse：为什么 CSS 语法高亮显示不一致？
- 29
Chrome中不一致的CSS“无效的属性值”
我来说两句