Question

我可以定义边框宽度。像

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

框宽度为200px，但我希望底部宽度仅为100px。

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

Answer 1

没有。你必须在.box中放入另一个元素，宽度为100px，然后将边框应用于此。

Answer 2

听起来你想要半边框。我认为奇怪，但可行。这适用于Firefox，Chrome和Safari。 MSIE我目前没有手头，可能会引起问题。

这种方法的工作方式是使用一个封闭的盒子，背景颜色为宽度的一半，比div.box高一个像素。我在身体上放了一个灰色背景，这样你就可以看到它正常工作。

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

Answer 3

或者你定义一个背景图像： .box { background：url（border.gif）no-repeat 0 bottom;}

并且图像宽度为100px，例如2px高度。

定义边框宽度（不是厚度）

3 个答案: