Css 形状支持 IE/Firefox
Css shapes support in IE/Firefox
有谁知道 IE 和 firefox 是否以及何时会支持 css 形状功能,尤其是 shape-outside
?
CSS 形状模块
这是什么?
W3 shape module (2014)
W3 newest shape module (2015)
来自 W3 文档
CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to wrap around the circle shape instead of the float’s bounding box
规范的当前状态是候选推荐。所以它几乎在当前的推荐中所以它或多或少可以被考虑在当前的网络规范中。
IE 支持吗?
一起来看看吧。有hope!
所以 Jonathan Sampson 分享了这个想法。
目前最新的Edge浏览器,其目前的IE状态处于待定状态。标记为中等优先级。
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>
有谁知道 IE 和 firefox 是否以及何时会支持 css 形状功能,尤其是 shape-outside
?
CSS 形状模块
这是什么?
W3 shape module (2014)
W3 newest shape module (2015)
来自 W3 文档
CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to wrap around the circle shape instead of the float’s bounding box
规范的当前状态是候选推荐。所以它几乎在当前的推荐中所以它或多或少可以被考虑在当前的网络规范中。
IE 支持吗?
一起来看看吧。有hope!
所以 Jonathan Sampson 分享了这个想法。
目前最新的Edge浏览器,其目前的IE状态处于待定状态。标记为中等优先级。
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>