Question

我正在尝试突出显示带有非矩形背景的页面上的文字（即边框使用jaunty角度的高亮显示）。文本是流动的（即它在可用空间中流动）。

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

我一直在网上搜索，并试图想出一个解决方案;可能是使用canvas元素的东西。这是一个非关键的设计元素;如果它只在最现代的浏览器中工作，并在旧浏览器中显示矩形边框;那会非常令人满意。

有人有什么想法吗？

更新：根据以下建议;我尝试使用border-image样式属性来创建效果。我开始将我的文本放在 SPAN 中（而不是，例如， P ，它会在文本块周围绘制一个矩形框 - 而不是每个人周围的边框）线）。然后我尝试使用如下的样式属性：

-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中，边框图像在所有文本行上都被拉伸一次（即图像的左侧从第一行的开头开始，图像的右侧在最后一行的末尾结束）;而在FF中，它会在每条线上拉伸一次（即在每条线上图像的开始和结束）。

也;设计要求每行文本与线条具有不同的角度;这不是任何浏览器的选项。

Answer 1

我不认为可以做到。但是！您可以使用PHP生成某种带有预定义图像的非矩形表单。

Answer 2

如果你有CSS3功能，可以选择border-image。将边框图像设置为您的jaunty边缘设置，背景颜色/图像与边框相同，因此它可以很好地融合。我在下面发布了一个链接。我之前没有使用过边框图像，但似乎有可能从我读过here。

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

2 个答案: