2010-06-14 91 views
2

我可以定义边框宽度。像定义边框宽度(不是厚度)

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

框宽度为200px,但我想在底部只有100px边框宽度。

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

+0

你能提出一个你想做什么的草图吗? – SWeko 2010-06-14 14:11:18

+2

这不是一个边框,这是一个独立于元素的线条。你甚至可以使用


。 – 2010-06-14 14:14:31

回答

1

这听起来像你想要一半的边界。奇怪,但可行,我想。这可以在Firefox,Chrome和Safari中使用。 MSIE我目前没有在手,并可能导致问题。

这种方式的工作方式是有一个背景颜色的背景颜色是宽度的一半,比div.box高1个像素。我把灰色背景放在身体上,这样你就可以看到它的工作。

<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

号你得把另一个元素.box,这是100px的宽范围内,并且边框应用到这一点。

0

或你定义一个背景图像那样的: .box的{ 背景:网址(border.gif)不重复0底部;}

并且图像是100像素宽,例如2px的唤起注意。