我正在尝试在具有非矩形背景的页面上突出显示文本(即边框使用活泼角度的突出显示)。文本是流动的(即它在可用空间中流动)。
不规则形状的高光 http://mockupserver.com/irregular_example.png
我一直在网上搜索并绞尽脑汁想出一个解决方案;可能是使用 canvas 元素的东西。这是一个非关键的设计元素;如果它只适用于最现代的浏览器并在旧浏览器中显示矩形边框;那将是相当令人满意的。
有人有想法么?
更新:根据以下建议;我尝试使用边框图像样式属性来创建效果。我首先将我的文本放在一个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 中,它会在每一行上拉伸一次(即在每一行上,图像开始和结束)。
还; 设计要求每一行文字与线条有不同的角度;这在任何浏览器中都不是一个选项。