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

时间:2012-04-11 15:13:00

标签: css canvas

我正在尝试突出显示带有非矩形背景的页面上的文字(即边框使用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中,它会在每条线上拉伸一次(即在每条线上图像的开始和结束)。

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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