1

背景が四角形ではないページのテキストを強調表示しようとしています(つまり、境界線が派手な角度を使用している場所を強調表示します)。テキストは流動的です (つまり、使用可能なスペースを流れます)。

不規則な形のハイライト http://mockupserver.com/irregular_example.png

私はウェブを検索し、解決策を考えようとして頭を悩ませてきました。おそらくキャンバス要素を使用したもの。これは重要ではない設計要素です。最新のブラウザーでのみ機能し、古いブラウザーでは長方形の境界線が表示される場合。それはかなり満足のいくものです。

誰にもアイデアはありますか？

更新：以下の提案に従って。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 では、ボーダー画像はテキストのすべての行に 1 回引き伸ばされます (つまり、画像の左側は最初の行の先頭で始まり、画像の右側は最後の行の終わりで終わります)。一方、FF では、各行に 1 回ずつ引き伸ばされます (つまり、各行で画像が開始および終了します)。

また; デザインでは、テキストの各行が行に対して異なる角度を持つ必要があります。これは、どのブラウザーでもオプションではありません。

4

2 に答える 2

0

できないと思います。しかし ！PHPを使用して、事前定義された画像を使用して、ある種の非長方形のフォームを生成できます。

于 2012-04-11T15:15:35.043 に答える
0

CSS3機能がある場合は、border-imageがオプションになる可能性があります。境界線の画像を、境界線と同じ背景色/画像で派手なエッジの設定に設定して、うまくブレンドされるようにします。以下のリンクを掲載しました。これまでborder-imageを使用したことはありませんが、ここで読んだことから可能性があるようです。

于 2012-04-11T15:15:56.893 に答える