CSS中边框的调整

时间:2012-03-08 12:35:01

标签: html css

我希望Div的边框小于div的宽度。如何在CSS中实现它?

下面的图片会给你更多的清晰度:

http://imageshack.us/photo/my-images/440/divkr.jpg/

2 个答案:

答案 0 :(得分:2)

使用普通CSS无法做到这一点。

然而,您可以使用两个div来获得此效果。

<div class="outer">
<div class="inner">

    text

</div>
</div>​

.outer
{
    background-color:blue;
padding:20px;
    width:200px;
}

.inner
{
    border:solid 1px white;
    height:150px;
    color:white;
}

http://jsfiddle.net/RreTH/

http://jsfiddle.net/RreTH/1/

答案 1 :(得分:2)

这是不可能的。

边框始终是元素框模型的外部。但是,您可能需要一种解决方法。

<div>
   <div id="inner" style="border:5px #000 solid;">
   </div>
</div>

现在,在此示例中,#inner的边框永远不会超过父级的边框。

对于演示部分,请检查this

您会注意到,外部div有一条细红线标记其边框,但内部div的边框可以作为outer div的内边框。

希望有所帮助