わかりました、これはしばらくの間私を悩ませてきた問題であり、いくつかの良い解決策と悪い解決策を見てきました。しかし、最善の解決策とは何か、落とし穴、欠点、大きな「いいえ、いいえ」とは.
私が望むのは、カスタムのグラフィカルな境界線を持つ動的で柔軟な DIV ブロックを作成することです。たとえば、影付きの DIV ボックスですが、影があるとは限りません。
更新: @Jeroen がコメントで次のように述べているように、私は「影を作成する最良の方法」を求めているだけではありません。クレイジーなカスタムグラフィカル ボーダー。
box-shadowCSS3 ( 、border-imageおよびborder-radius)を使用したいくつかのソリューションがあることは知っていますが、 100% クロスブラウザーではありません。特に、1 つまたは 2 つのバージョンの古いブラウザーで作業する必要がある場合はそうではありません。
私が達成したいものの例の画像:
また
上記の例は、私が頻繁に使用する 1 つの方法で実際に行われています。それは仕事をし、すべての要件を満たしています。
- さまざまなサイズの DIV ブロックに適応します。
- カスタムグラフィックを使用しています。
- クロスブラウザーとバージョンで動作します。
- 適用は非常に簡単で迅速です。
- JavaScript がなく、100% CSS/HTML です。
...しかし、もちろんいくつかの短所があります。
- 8枚の画像が必要です。
- 実際のコンテンツのない8 つの追加の DIV ブロックが必要です。
- ソースではあまりきれいではありません。
HTML DIV ブロックの例:
<div class="flowBox">
<h1>Header 1</h1>
Vivamus tincidun...
<div class="border_t"></div>
<div class="border_b"></div>
<div class="border_l"></div>
<div class="border_r"></div>
<div class="border_br"></div>
<div class="border_bl"></div>
<div class="border_tr"></div>
<div class="border_tl"></div>
</div>
CSS の例:
<style type="text/css">
<!--
.flowBox {
background:#FFFFFF;
margin:10px;
float:left;
padding:10px;
width:250px;
position:relative;
}
.border_t {
background:url(border_t.png) repeat-x;
position:absolute;
top:-2px; left:0;
width:100%;
height:2px;
}
.border_b {
background:url(border_b.png) repeat-x;
position:absolute;
bottom:-6px; left:0;
width:100%;
height:6px;
}
.border_l {
background:url(border_l.png) repeat-y;
position:absolute;
top:0; left:-3px;
width:3px;
height:100%;
}
.border_r {
background:url(border_r.png) repeat-y;
position:absolute;
top:0; right:-6px;
width:6px;
height:100%;
}
.border_br {
background:url(border_br.png);
position:absolute;
bottom:-6px; right:-6px;
width:6px;
height:6px;
}
.border_bl {
background:url(border_bl.png);
position:absolute;
bottom:-6px; left:-3px;
width:3px;
height:6px;
}
.border_tr {
background:url(border_tr.png);
position:absolute;
top:-2px; right:-5px;
width:5px;
height:2px;
}
.border_tl {
background:url(border_tl.png);
position:absolute;
top:-2px; left:-2px;
width:2px;
height:2px;
}
-->
</style>
ご覧のとおり、これはおそらく最適なソリューションではありません。 しかし、より良い方法はありますか？
更新: 1 つの標準ではありませんが、ほとんどのブラウザーとバージョンでシャドウがサポートされています。css-shadow を使用したソース: http://pastebin.com/LZHUQRW9 しかし、私の質問はシャドウだけに関連するものではありません。
完全なソース コード: http://pastebin.com/wxFS2PHr