Со мной никак не хочет подружиться border-radius
Всем привет! У меня есть небольшой код, выводящий header страницы. В нём есть разделение на секции. При ховере на одну из секции хедера по идее должен меняться линейный градиент, что вобщем то он и делает. И всё было бы хорошо, но блин, секции номер 1 и номер 8 при ховере почему-то ведут себя странно - выходят за существующий border-radius родительского div'a. Я не хочу прописывать для каждой секции отдельный border-radius, а найти оптимальное решения для всех ячеек.
Сам код:
<style>
.header {
width: 100%;
height: 50px;
border-radius: 10%;
background: linear-gradient(#CCCCCC, #222222);
}
.header > .panel1, .panel2, .panel3, .panel4, .panel5, .panel6, .panel7 {
width: 12.5%;
height: 50px;
border-right: 2.5px solid #111111;
position: absolute;
overflow: hidden;
}
.header > .panel8 {
width: 12.5%;
height: 50px;
border-left: 2.5px solid #111111;
position: absolute;
overflow: hidden;
}
.panel1 {
left: 0%;
}
.panel2 {
left: 12.5%;
}
.panel3 {
left: 25%;
}
.panel4 {
left: 37.5%;
}
.panel5 {
left: 50%;
}
.panel6 {
left: 62.5%;
}
.panel7 {
left: 75%;
}
.panel8 {
left: 87.5%;
}
.header > *:active {
background: linear-gradient(#222222, #CCCCCC);
}
</style>
</head>
<body>
<div class="header">
<div class="panel1"><img src=""></div>
<div class="panel2"><img src=""></div>
<div class="panel3"><img src=""></div>
<div class="panel4"><img src=""></div>
<div class="panel5"><img src=""></div>
<div class="panel6"><img src=""></div>
<div class="panel7"><img src=""></div>
<div class="panel8"><img src=""></div>
</div>
P.S.Не помог overflow: hidden; :-? |