CSS形状已经成为现实了吗？

Question

我一直在寻找关于CSS形状的网站；我的想法是，我可以使用CSS来创建采用许多形状的文本，例如圆形，而不是矩形。但是我找到的网站，代码不起作用。然后，当我查看他们自己的源代码时(因为他们在自己的网站上有示例)，结果发现他们拥有的所有示例都是图像--而不是真正的代码。所以我在这里问。这是真正的CSS-Shape吗？我想在半圆内渲染一个文本。这就是我如何发现CSS-Shapes的。

Answer 1

是也不是。很多浏览器还不支持“真正的”CSS形状。

请参阅http://caniuse.com/#feat=css-shapes

但是，也可以通过向元素添加圆角来画圆，这是所有主流浏览器都支持的，包括IE9。

请参阅：http://caniuse.com/#feat=border-radius

因此，除非你也需要在IE8中工作，否则你可以在纯CSS中添加圆圈中的文本。对于IE8，文本也会显示出来，只是显示在正方形或矩形中，而不是圆形中，所以这可能是您可以接受的后备方案。

你没有说出具体的网站名称，但通常网站上会有一些关于新功能的文章，这些新功能可能还没有得到(或者还没有得到广泛的)支持，这也是为什么他们可以用图片来展示它一旦可用时会是什么样子。

正如Niet the Dark Absol在评论中指出的那样，border-radius解决方案实际上并没有将文本包裹在一个圆圈中。文本的行为就像元素仍然是矩形一样。如果您需要使文本遵循圆形，并且需要对当前一代浏览器的支持，则需要JavaScript的帮助。TextMorph library似乎做到了这一点。我刚刚在谷歌上搜索过，所以我没有使用它的经验，但它看起来很有提示。

Answer 2

要创建半圆，您可以创建一个<div>元素并使用边框半径设置其样式，如下所示：

#semicircle {
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    background: green;
}

然后，如果你想在里面放一些文本，你可以在里面插入一个<span>，这样它看起来就像这样：

<div id="semicircle">
     <span>Some text</span>
</div>

然后设置文本样式以将其放置在父<div>中所需的位置。