1

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

不规则形状的高光 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 中,它会在每一行上拉伸一次(即在每一行上,图像开始和结束)。

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

4

2 回答 2

0

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

于 2012-04-11T15:15:35.043 回答
0

如果你有 CSS3 能力,border-image 可能是一个选项。将边框图像设置为您的活泼边缘设置,其背景颜色/图像与边框相同,因此可以很好地融合。我在下面发布了一个链接。我以前没有使用过边框图像,但从我在这里读到的内容来看似乎是一种可能性。

于 2012-04-11T15:15:56.893 回答