#фишка дня

Итак, сегодня я спросоня долго смотрел на этот пример от Джея и никак не мог понять, какого фига тут происходит.

Не, ну я вижу, что в итоге получается градиентная граница, но... но почему?

И тут до меня дошло: оказывается, при настройке фона можно фактически указывать боксовую модель! Ну то есть называется-то оно background-origin, но по факту работает по тем же принципам, что и box-sizing.

Итак, три значения: border-box, padding-box и content-box.

Выходит, border-box заполнит фон, включая границы, padding-box — до полей, a content-box — по контенту.

Ну и для градиентных границ (к сожалению, только с непрозрачным фоном), получается так:

article {
  background: // layer them up with different origin!
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--gradient) border-box;
  border: 4px solid transparent;
}

Будни разработчика

This media is not supported in your browser

VIEW IN TELEGRAM

#фишка дня

Итак, сегодня я спросоня долго смотрел на этот пример от Джея и никак не мог понять, какого фига тут происходит.

Не, ну я вижу, что в итоге получается градиентная граница, но... но почему?

И тут до меня дошло: оказывается, при настройке фона можно фактически указывать боксовую модель! Ну то есть называется-то оно background-origin, но по факту работает по тем же принципам, что и box-sizing.

Итак, три значения: border-box, padding-box и content-box.

Выходит, border-box заполнит фон, включая границы, padding-box — до полей, a content-box — по контенту.

Ну и для градиентных границ (к сожалению, только с непрозрачным фоном), получается так:

article {
  background: // layer them up with different origin!
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--gradient) border-box;
  border: 4px solid transparent;
}

Обратите внимание, котаны, такое прокатывает только с фоном-изображением или градиентом, для сплошного заполнения просто указать цвет не выйдет!

Ну и пример, конечно же: https://codepen.io/alinaki/pen/QWYoPpx

#css #background #origin #бородач

hottg.com/htmlshit/3575

2.3K viewsSergey Bekharsky, Apr 23 at 05:15