Как работает этот код CSS?

Question

[MrLumuss]

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

item::before{
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 15px; 
    padding: 3px; 
    background:linear-gradient(180deg,rgb(42, 218, 204), rgb(23, 30, 36)); 
    -webkit-mask: 
         linear-gradient(#fff 0 0) content-box, 
         inear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; 
}

Comments

[Антон Горецкий]

показывайте как это выглядит, потому что всё зависит от окружающих свойств и разметки. Тут создается теневой элемент before c градиентом и скруглением, к градиенту применяется исключающая маска.

[MrLumuss]

Вот так я это применил у себя, но бездумно

[black1277]

MrLumuss, а у item какие стили?

[Антон Горецкий]

MrLumuss, :) почему бездумно? Выглядит нормально, вроде.

[MrLumuss]

black1277,

position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #171E24;
        border-radius: 5px;
        border-radius: 10px;
        padding: 21px 21px 45px 21px;
        z-index: 1;

[MrLumuss]

ошибку нашел даже) два раза border-radius прописал

Answer 1

[xwjkka]

В CSS, ::before создаёт псевдоэлемент,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content.

Тут можно больше прочитать про before

content - обязательное свойство для before
inset - смещение элемента
-webkit-... - для различных браузеров
mask-composite - наложение/наслаивание