Свойство background-clip

Задает поведение фона при наличии границы border

background-clip: border-box;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

background-clip: border-box;

Фон будет расположен под границей border элемента

<style>
.example-1 {
    width: 200px;
    height: 200px;
    border: 10px dashed #584c4b;
    background-color: #dd423a;
    background-clip: border-box;
}
</style>
<div class="example-1"></div>
background-clip: padding-box;

Фон не будет размещен под границей border элемента

<style>
.example-2 {
    width: 200px;
    height: 200px;
    border: 10px dashed #584c4b;
    background-color: #dd423a;
    background-clip: padding-box;
}
</style>
<div class="example-2"></div>
background-clip: content-box;

Фон элемента будет расположен строго под содержимым элемента

<style>
.example-3 {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px dashed #584c4b;
    background-color: #dd423a;
    background-clip: content-box;
}
</style>
<div class="example-3">Фон элемента будет расположен строго под содержимым элемента</div>
Фон элемента будет расположен строго под содержимым элемента
background-clip: text;

Фон будет применен для текста элемента. Чтобы эффект был виден, установите цвет текста элемента прозрачным color: transparent;

Данное значение экспериментальное и работает не во всех браузерах, а так же нужно указывать префикс -webkit-

<style>
.example-4 {
    background: linear-gradient(#dd423a, #1947ec);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
</style>
<h2 class="example-4">Фон будет применен для текста элемента</h2>

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

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии