CSS形状是现实吗？

我一直在找网站在谈论CSS-Shapes;其中的想法是，而不是矩形我可以使用CSS来创建文本，采取了一些形状，如圆形。但是我发现的网站有一些不起作用的代码。然后当我看着他们自己的源代码时（因为他们在他们的网站上有例子），结果发现他们所有的例子都是图片 - 而不是实际的代码。所以我在这里问。这个CSS形状是真实的吗？我想在半圆内呈现文字。这就是我发现CSS-Shapes的方式。CSS形状是现实吗？

来源

2014-12-27 Katedral Pillon

只能通过实验。 http://caniuse.com/#feat=css-shapes –

只要注意规格：http://dev.w3.org/csswg/css-shapes/ –

我不认为这个问题太宽泛。这是一个关于CSS样式是否被浏览器支持的具体问题。获得相同结果的任何可能的解决方案都不是问题的真正组成部分。答案很高兴，但这不是必需的。提名重新开放 – Joeytje50

要创建一个半圆，你可以创建一个<div>元素，并与圆角半径的款式吧，这样的事情：

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

然后，如果你希望把一些文字在它你可以插入一个<span>里面，所以HTML看起来像这样：

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

，然后风格来定位它的文字，你希望父<div>内。

来源

2014-12-27 21:32:50

虽然这不会将文字包装到半圆。 –

是的，没有。 “真正的”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似乎有伎俩。我只是搜索了它，所以我没有经验，但它看起来很诡异。

来源

2014-12-27 21:33:02 GolezTrol

尽管如此，'border-radius'不会将文本包装到圆圈中。 –

@NiettheDarkAbsol没错，我错过了这个要求。我不认为现在可以使用真正的CSS解决方案。所以在这种情况下，问题的实际答案将是“否”，但我会保留当前的上下文答案。 ;） – GolezTrol

的确，我目前使用'border-radius'，它不起作用。 –

CSS形状是现实吗？

回答

相关问题