Допустим, у меня есть этот CSS,
#wrap {width: 190px; padding: 0 10px; border-radius: 10px; background: #000;}
#wrap a {width: 190px; padding: 10px; display: block;}
#wrap a:hover {background: #fff;}
И этот HTML,
<div id="wrap">
<ul>
<li><a href="#">Some Link 1</a></li>
<li><a href="#">Some Link 2</a></li>
<li><a href="#">Some Link 3</a></li>
<li><a href="#">Some Link 4</a></li>
</ul>
</div>
Теперь ссылки точно вписываются в #wrap, но у #wrap есть радиус границы и черный фон. Поскольку при наведении ссылки имеют белый фон, первый дочерний элемент и последний дочерний элемент располагаются над углами радиуса границы. Но когда они сидят сверху , фон #wrap скрывается, скрывая радиус границы.
Я знаю, что могу назначить первому и последнему дочернему элементу радиус границы, но есть ли более простой способ сделать это?
Бывают случаи, когда присвоение первому и последнему дочернему элементу радиуса границы не будет работать, скажем, если бы я хотел это для моего div-оболочки,
padding: 5px 10px;
Тогда, даже если бы я назначил радиус границы, они не будут совпадать, что сделает его безобразным.