Как позволить левой границе перекрывать нижнюю границу нижнего левого пикселя? - PullRequest
Новая
       0

Как позволить левой границе перекрывать нижнюю границу нижнего левого пикселя?

8 голосов
/ 20 января 2012

Предположим, у меня есть следующий фрагмент кода CSS: 

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

Левая граница синего цвета, нижняя граница красного цвета. Но нижний левый пиксель, где левая и нижняя границы перекрываются, в моем браузере красный. Видимо, нижняя граница перекрывает левую границу этого пикселя.

Можно ли вручную установить порядок наложения или выполнить другим способом, чтобы левый нижний пиксель был синего цвета вместо красного?

1 Ответ

7 голосов
/ 20 января 2012

Цвет нижнего левого пикселя принадлежит вашему браузеру, его нельзя переопределить.

Однако вы можете использовать вложенные div для этой сложной ситуации. Попробуйте это: 

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;
}

И ваш HTML-код: 

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