2010-06-02 4 views
1

Je sais comment générer des coins arrondis en utilisant des images. Mais s'il vous plaît jeter un oeil sur le lien: -Comment créer ces bordures au milieu?

http://roundedbox.andreas-kalt.de/

Les coins arrondis sur les quatre coins sont toutes les images, mais ma question est de savoir comment les frontières au milieu fait? Ces bordures de couleur verte qui entourent la div entière.

Le tutoriel est donné, mais il est allemand :(. Je ne veux pas également d'utiliser Css3 comme -webkit-rayon frontière etc car ils ne sont pas encore pris en charge dans IE

Merci à l'avance :)

Répondre

1

l'ensemble est fait avec 4 images de fond ici est le css

roundbox-tr { 
    margin:15px auto; 
    padding:0; 
    background:url("roundbox_tr.gif") no-repeat right top; 
    width: 90%; 
} 

/* top-left corner and left side */ 
.roundbox-tl { 
    margin:0; 
    padding:0; 
    background: url("roundbox_tl.gif") no-repeat left top; 
} 

/* bottom-right corner and bottom side */ 
.roundbox-br { 
    margin:0; 
    padding:0; 
    background: url("roundbox_br.gif") no-repeat right bottom; 
} 

/* bottom-left corner */ 
.roundbox-bl { 
    margin:0; 
    padding:0; 
    background: url("roundbox_bl.gif") no-repeat left bottom; 
} 
+0

Vous voulez dire chose entière dans une grande grande image? Mais, c'est une très mauvaise pratique. N'est-ce pas? En outre, il est limité par la largeur et la hauteur. Que faire si j'ai une largeur et/ou une hauteur différente de celle indiquée dans l'URL? Concevoir une image différente? N'est-ce pas mal? – TCM

+0

ouais pas une bonne idée pour les coins arrondis. Vous pouvez essayer NIFTY Corners. Google, vous trouverez un bon exemple. –

+0

Salut John, je sais qu'ils sont faits avec 4 images (pour les quatre coins). Mais ma question est, le CSS que vous avez posté est pour les quatre coins. Qu'en est-il de la frontière au milieu? La frontière centrale supérieure. Si je ne suis toujours pas clair. S'il vous plaît, faites-moi savoir. – TCM

0

Ils sont utilisés pour des images frontière. Utilisez les addons firebug dans mozilla et vérifiez cela.

Questions connexes