Jak pozwolić, aby lewa krawędź zachodziła na dolną granicę w dolnym lewym pikselu? - css, granica

Załóżmy, że mam następujący fragment kodu CSS:

div {
width: 200px;
padding: 10px;
border-width: 1px;
border-style: solid;
border-bottom-color: red;
border-left-color: blue;
}

Lewa granica jest niebieska, dolnagranica jest w kolorze czerwonym. Ale lewy dolny piksel, gdzie pokrywają się lewa i dolna granica, jest czerwony w mojej przeglądarce. Najwyraźniej dolna granica pokrywa się z lewą krawędzią tego piksela.

Czy mogę ręcznie ustawić kolejność nakładania się lub wykonać w inny sposób, że lewy dolny piksel jest niebieski, a nie czerwony?

Odpowiedzi:

Kolor lewego piksela dolnego należy do przeglądarki, nie można go zastąpić.

Jednak w tej zaawansowanej sytuacji można użyć zagnieżdżonych div. Spróbuj tego:

div.parent {
width: 200px;
border-width: 1px;
border-style: solid;
border-left-color: blue;
}

div.child {
width: 200px;
padding: 10px;
border-width: 1px;
border-style: solid;
border-bottom-color: red;
}

Twój HTML to:

<div class="parent">
<div class="child">
Your content will appear correctly.
</div>
</div>