css - CSS-Shapes 已经成为现实了吗?

标签 css html css-shapes

<分区>

我一直在寻找谈论 CSS-Shapes 的网站;我的想法是,我可以使用 CSS 来创建采用多种形状(例如圆形)的文本,而不是矩形。但是我发现的网站有不起作用的代码。然后当我查看他们自己的源代码时(因为他们在他们的网站上有示例),结果发现他们所有的示例都是图像——而不是真实的代码。所以我在这里问。这个 CSS-Shape 是真的吗?我想在半圆内呈现文本。这就是我发现 CSS-Shapes 的方式。

最佳答案

是也不是。 “真正的”CSS 形状还没有被广泛的浏览器支持。

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

但是也可以通过给元素添加圆 Angular 来制作圆,所有主流浏览器都支持,包括IE9。

参见:http://caniuse.com/#feat=border-radius

因此,除非您也需要它在 IE8 中工作,否则您可以使用纯 CSS 在圆圈中添加文本。对于 IE8,文本也将显示为正方形或矩形而不是圆形,因此这可能是您可以接受的后备方案。

您没有指定具体网站的名称,但很多时候,关于网络开发的网站都会有关于新功能的文章,这些新功能可能还没有(或没有得到广泛)支持,这也是为什么他们可以有图片来展示它的原因一旦可用就会看起来像。

正如 Niet the Dark Absol 在评论中指出的那样,border-radius 解决方案实际上并未将文本包裹在一个圆圈中。文本的行为就像元素仍然是矩形一样。如果你需要让文字跟随圆形,并且需要当前一代浏览器的支持,你将需要 JavaScript 的帮助。 TextMorph library似乎可以解决问题。我只是用谷歌搜索了一下,所以我没有这方面的经验,但它看起来很有前途。

关于css - CSS-Shapes 已经成为现实了吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27671609/

相关文章:

javascript - 垂直滚动不起作用

javascript - 没有 jQuery 的下拉菜单中的 Accordion ?

php - 使用 JavaScript API 从 LinkedIn 获取个人资料详细信息

具有两个不同颜色或至少看起来像的边框的 CSS 圆圈

html - 创建一个复杂的盒子

css - IE7中绝对定位限制div的宽度

javascript - 使用 Javascript 提取 HTML 中标签的属性

java - Netbeans (7.3) - 如何在一个项目中创建 'Java Web app' 和 HTML/JavaScript 'HTML 5 Application'?

html - 如何用纯CSS创建文字描边和三 Angular 形?

javascript - 使用 CSS3 或 JS 中的 div 动画对 div 内容进行动画处理