具有不规则边框的 CSS 文本突出显示

Question

我正在尝试在具有非矩形背景 的页面上突出显示文本(即边框使用活泼 Angular 突出显示)。文本是流动的(即它在可用空间中流动)。

irregularly shaped highlight http://mockupserver.com/irregular_example.png

我一直在网上搜索并绞尽脑汁想出一个解决方案；可能是使用 Canvas 元素的东西。这是一个非关键的设计元素；如果它只适用于最现代的浏览器，而在旧浏览器中显示矩形边框；那将是相当令人满意的。

有人有什么想法吗？

更新:按照以下建议；我尝试使用 border-image 样式属性来创建效果。我首先将我的文本放在 SPAN 中(而不是 P，它会在文本 block 周围绘制一个矩形框 - 而不是在每个个体周围画一个边框线)。然后我尝试使用如下样式属性:

-moz-border-image:url("border.png") 5% stretch stretch;
-webkit-border-image:url("border.png") 5% stretch stretch;
border-image:url("border.png") 5% stretch stretch;

这几乎可以工作...除了我在不同的浏览器中得到完全不同的结果。例如;在 Chrome 中，边框图像在所有文本行中被拉伸(stretch)一次(即图像的左侧从第一行的开头开始，图像的右侧在最后一行的末尾结束)；而在 FF 中，它会在每一行上拉伸(stretch)一次(即在每一行上图像开始和结束)。

还有；该设计要求每行文字与线条有不同的 Angular ；这在任何浏览器中都不是一个选项。

Answer 1

我认为这是不可能的。但 !您可以使用 PHP 生成某种具有预定义图像的非矩形形式。