определить ширину границы (не толщину) - PullRequest
Новая
       3

определить ширину границы (не толщину)

2 голосов
/ 14 июня 2010

я могу определить ширину границы. как 

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

ширина поля 200px, но я хочу ширину границы только снизу 100px.

альтернативный текст http://www.freeimagehosting.net/uploads/6ba3c54859.png

Ответы [ 3 ]

2 голосов
/ 14 июня 2010

Нет.Вам нужно будет поместить другой элемент в .box, который имеет ширину 100px, и применить к нему границу.

1 голос
/ 14 июня 2010

Звучит так, будто вы хотите половину границы.Странно, но выполнимо, я думаю.Это работает в Firefox, Chrome и Safari.MSIE У меня нет под рукой в ​​настоящее время, и может вызвать проблемы.

Способ, которым это работает, заключается в том, чтобы иметь вмещающую коробку с фоновым цветом, который в два раза меньше ширины и на 1 пиксель выше 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>
0 голосов
/ 14 июня 2010

или вы определяете фоновое изображение, например, так:*

...