boîte de coin technique avec des images Arrondi tout autour comme frontières

Question

Est-ce que quelqu'un sait bon exemple de l'utilisation de CSS pour créer boîte de coin arrondi où:

1. Tous les 4 coins et 4 côtés sont l'image. Les côtés ont répété img
2. La largeur est constante, tandis que la hauteur est flexible
3. travail tous 3.x FF, IE 7 ou plus, Chrome

Laissez-moi savoir. Merci

Answer 1

Eh bien, vous pouvez le faire avec 3 divs.

<div class="bg"><div class="top"><div class="bot">text here</div></div></div> 

bg aurait comme css

background: url(path/to/repeated/background.gif) repeat-y; 

Si l'arrière-plan couvre toute la largeur de la div, car il est constant. Cela tuera à la fois vos côtés gauche et droit.

Ensuite, pour le haut et le bas, utilisez simplement les images no-repeat top left; et no-repeat bottom left. Ils auraient chacun 2 coins plus toute la bonté imagey entre.

Espérons que vous pouvez remplir les détails de cela si vous avez une assez bonne compréhension de CSS.

Answer 2

Je ne connais pas de tels codes. Mais je connais un meilleur code pour css coins arrondis sans images.

Vérifiez cette link

Son travail dans tous les navigateurs et facile à mettre en œuvre. La grande chose est qu'il fonctionne bien dans ie6! .. Great na ..

Answer 3

CSS3 propriétés pour les images de la frontière sont les suivantes:

 
border-image: 
border-top-image 
border-right-image 
border-bottom-image 
border-left-image 
border-corner-image: 
border-top-left-image 
border-top-right-image 
border-bottom-left-image 
border-bottom-right-image 

Exemple:

 
border-image: url(border.png) 27 27 27 27 round round; 

Mozilla diffère de IE, Chrome, Safari-à-dire propriétés à l'aide commençant par -moz autre que -webkit

Pour plus d'explications n à propos de ces propriétés, veuillez consulter ces définitions et exemples.

Source1, Source2