CSS слияние коробка тень

Question

Я хочу сделать горизонтальную панель навигации с неупорядоченным списком и элементами списка, которые представляют собой элементы панели:

Я использовал ширину 25% для каждого элемента, так что они будут соответствовать именно в баре и коробчатого тени, чтобы создать рамку вокруг каждого элемента списка, потому что если я решил использовать границу, элементы не поместилась бы в баре:

#bar { 
 
    margin: auto; 
 
    width: 50%; 
 
    height: 30px; 
 
    padding: 0; 
 
    background: lightgrey; 
 
    text-align: center; 
 
} 
 
.foo { 
 
    line-height: 30px; 
 
    float: left; 
 
    width: 25%; 
 
    list-style: none; 
 
    box-shadow: 0 0 0 1pt black; 
 
}

<ul id="bar"> 
 
    <li class="foo">Foo 1</li> 
 
    <li class="foo">Foo 2</li> 
 
    <li class="foo">Foo 3</li> 
 
    <li class="foo">Foo 4</li> 
 
</ul>

Однако, поскольку есть t wo тени между каждым элементом, я получаю тень в два раза толще между ними.

Есть ли способ, чтобы каким-то образом объединить эти тени?

Я пробовал пограничный крах: обрушился, но это не изменило ничего. Я также хотел бы избежать использования контура, потому что я хочу, чтобы стиль этого меню далее.

Answer 1

Как насчет этого? Просто используйте box-sizing: border-box;, и границы не повлияют на вашу ширину.

fiddle here

* { 
    box-sizing: border-box; 
} 

#bar 
{ 
    margin: auto; 
    width: 50%; 
    height: 30px; 
    padding: 0; 
    background: lightgrey; 
    text-align: center; 
} 

.foo 
{ 
    line-height: 30px; 
    float: left; 
    width: 25%; 
    list-style: none; 
    /* box-shadow: 0 0 0 1pt black; */ 
    border-top: 1px black solid; 
    border-left:1px black solid; 
    border-bottom: 1px black solid; 
} 

.foo:last-child { 
    border-right: 1px black solid; 
} 

Answer 2

Ваш лучший вариант, вероятно, ответ от Амра Noman Но, если вы действительно хотите, чтобы исправить свою тень, вы можете стиль бара с тем же тенью, которую вы используете (для границ)

И создайте второй .foo и следуйте слева, чтобы заполнить внутренние границы.

Я установил Внешним границ синим, так что легко увидеть, что это то, что

#bar { 
 
    margin: auto; 
 
    width: 50%; 
 
    height: 30px; 
 
    padding: 0; 
 
    background: lightgrey; 
 
    text-align: center; 
 
    box-shadow: 0 0 0 1pt blue; 
 
    
 
} 
 
.foo { 
 
    line-height: 30px; 
 
    float: left; 
 
    width: 25%; 
 
    list-style: none; 
 
} 
 

 
.foo:nth-child(n+2) { 
 
    box-shadow: -1pt 0 0 0 black; 
 
    
 
}

<ul id="bar"> 
 
    <li class="foo">Foo 1</li> 
 
    <li class="foo">Foo 2</li> 
 
    <li class="foo">Foo 3</li> 
 
    <li class="foo">Foo 4</li> 
 
</ul>