javascript - Javascript、CSS 和 HTML - 根据内容调整大小的文本对象

Question

我对 Web 开发非常陌生，我需要在带有圆形边缘的框中创建包含文本的对象，如图像 中的边框的大小应该随着文本的大小而增长。

我不能使用任何 css 库或 css3 边界半径。有人介意指出我正确的方向吗？我不想要完整的工作代码 - 我想自己弄清楚细节 - 但非常感谢链接或研究主题的列表。

谢谢！

---edit--- 我也不能使用任何css或javascript库。我这样做是为了一项任务而不是现实世界的场景 - 因此存在局限性。

Answer 1

好吧，如果你不使用库和 css3.. 你有两个选择：

1. 将圆角矩形的图像切片，将文本放在一个 div 中，然后创建一堆其他 div，并将这些图像设置为背景，可以在此处找到详细信息

2. 使用画布参考这里

别担心，canvas 不是一个库，它是 Html5 规范的一部分（虽然我不知道你是否可以使用 html5）在这里阅读更多关于 canvas 以及如何使用它和一个简单教程的信息。此处解释了如何在画布中绘制文本

Answer 2

如果您不想使用 css 或图像来实现圆角外观，您可以查看nifty corners。

基本上它使用javascript在角落覆盖新标签并使用颜色对比来获得曲线。