CSS形状模块

Question

有没有人知道IE和Firefox是否以及何时支持css形状功能，尤其是shape-outside？

Answer 1

CSS形状模块

这是什么？
W3 shape module（2014）
W3 newest shape module（2015）

来自 W3 文档

CSS Shapes描述了在CSS中使用的几何形状。对于级别1，CSS形状可以应用于浮点数。浮动上的圆形将导致内联内容环绕圆形而不是浮动的边界框

规范的当前状态为 候选推荐 。所以它的几乎在当前的推荐中，因此在当前的Web规范中可以或多或少地考虑它。

IE支持？

让我们来看看。有hope！
所以Jonathan Sampson分享了这个想法。

目前，对于最新的Edge浏览器，其当前的IE状态位于待办事项列表中。标记为中等优先级。

<强> Can I use it now?

TL; DR

运行此命令以查看是否可以使用它：

.left {
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  width: 40%;
  height: 12ex;
  transform: scaleX(-1);
  position: relative;
  overflow: hidden;
}
.left:before {
  content: " ";
  position: absolute;
  width: 100%;
  background-color: rgba(50, 50, 50, 0.6);
  height: 100%;
  transform: rotate(-17deg);
  transform-origin: bottom right;
}
p {
  width: 300px;
  text-align: center;
}

<div class="left"></div>
<p>
  If this text is inside the shape or all the text is below it, it's not working. If it is aligned to the top edge of the shape, then it is working.
</p>

Css在IE / Firefox中支持形状

1 个答案:

CSS形状模块

IE支持？