2010-06-14 8 views
2

Puis-je définir la largeur de la bordure. commeDéfinir la largeur de la bordure (pas l'épaisseur)

.box{ 
    width:200px; 
    height:100px; 
    border-bottom:1px solid #000; 
} 

largeur de la boîte est 200px mais je veux largeur de la bordure en bas seulement 100px.

alt text http://www.freeimagehosting.net/uploads/6ba3c54859.png

+0

pouvez-vous mettre en place une esquisse de ce que vous essayez de faire? – SWeko

+2

ce n'est pas une bordure, c'est une ligne indépendante de l'élément. vous pouvez même utiliser


pour cela. –

Répondre

1

On dirait que vous voulez une demi-bordure. Étrange, mais faisable, je pense. Cela fonctionne dans Firefox, Chrome et Safari. MSIE Je n'ai pas en main pour le moment, et peut causer des problèmes.

La façon dont cela fonctionne est d'avoir une boîte d'enceinte avec une couleur de fond qui est moitié moins large, et 1 pixel plus grand que div.box. Je mets un fond de gris sur le corps pour que tu puisses le voir fonctionner.

<html> 
<style type="text/css"> 
body { 
    background-color: #ccc; 
    color: #000; 
} 
.box-border { 
    width: 100px; /* half as wide as .box! */ 
    height: 101px; /* just slightly taller than .box! */ 
    background-color: #000; 
    overflow: visible; /* .box, inside this, can go outside it */ 
} 
.box{ 
    width: 200px; 
    height: 100px; 
    background-color: #fff; 
} 
</style> 
<body> 
    <div class="box-border"> 
     <div class="box"> 
      The quick brown fox jumped over the lazy dog. 
     </div> 
    </div> 
</body> 
</html> 
2

Non, vous devrez mettre un autre élément dans le .box, qui est 100px de large, et d'appliquer la frontière à cela.

0

ou vous définissez une image de fond comme ça: .box { background: url (border.gif) no-repeat 0 fond;}

et l'image est 100px de large et par exemple 2px heigh.

Questions connexes