Personnalisé graphique de la frontière sur les DIV en CSS

Ok, donc c'est un problème qui a ete me harceler pendant un certain temps et j'ai vu quelques bonnes et de mauvaises solutions. Mais quelle est la meilleure solution, et qu'est-ce que les pièges, les inconvénients et les grands "Non, Non".

Ce que je veux, c'est créer de la dynamique, flexible DIV-blocs avec un graphique de la frontière. Pour exemple un DIV-box avec les ombres, mais pas nécessairement les ombres.

Mise à JOUR:
Comme, @Jeroen ci-dessous indiqué dans un commentaire, je ne suis pas seulement vous demandant de "la meilleure façon de faire de l'ombre". Tout fou personnalisé graphique frontière.

Je sais il y a des solutions avec CSS3 (box-shadow, border-image et border-radius), mais il n'est pas 100% cross-browser, surtout pas si vous avez à travailler avec un ou deux versions des navigateurs plus anciens.

Exemple à l'image de ce que je veux réaliser:

ou

L'exemple ci-dessus est en fait réalisée avec une méthode que j'utilise fréquemment. Il fait le travail et il est conforme à toutes les exigences.

• Il s'adapte à différentes tailles de DIV-blocs.
• Il utilise des graphiques personnalisés.
• Il fonctionne de la croix-navigateur et versions.
• Il est assez facile et rapide à appliquer.
• Il est JavaScript gratuit, 100% CSS/HTML.

...mais bien sûr, il ya quelques inconvénients:

• Il nécessite 8 images.
• Il exige supplémentaire 8 DIV-blocs sans réel contenu.
• Pas très jolie à la source.

HTML DIV-bloc exemple:

<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 exemple:

<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>

Comme vous pouvez le voir, il est peut-être pas une solution optimale.
Mais est-il une meilleure façon?

Mise à JOUR: Il ya un soutien pour les ombres dans la plupart des navigateurs et versions, même si elle n'est pas une norme. De la Source à l'aide de css-shadow: http://pastebin.com/LZHUQRW9
Mais ma question ne porte pas seulement pour les ombres.

L'intégralité du code source: http://pastebin.com/wxFS2PHr

OriginalL'auteur jamietelin | 2012-05-08