Умело реализуйте градиентную границу с закругленными углами

внешний интерфейс CSS
Умело реализуйте градиентную границу с закругленными углами

Как добиться следующего эффекта градиентной границы:

image

Сама по себе эта задача не сложная, и есть несколько способов ее достижения, в основном есть некоторые детали, на которые нужно обратить внимание.

border-image

border-imageэто спецификация CSSCSS Backgrounds and Borders Module Level 3(Последняя версия официальной спецификации для фона и границы) Новое значение свойства.

Как следует из названия, мы можем добавить изображение к элементу границы, что-то вродеbackground-image, это может быть изображение или градиент, больше не ограниченный сплошным цветом.

Используйте изображение границы для достижения градиентной границы

имеютborder-imageПосле этого становится удобно реализовывать градиентные границы

Но больше введенияborder-imageСинтаксис читатели должны понять сами.

Реализация выглядит следующим образом:

<div class="border-image"></div>

.border-image {
    width: 200px;
    height: 100px;
    border-radius: 10px;
    border-image-source: linear-gradient(45deg, gold, deeppink);
    border-image-slice: 1;
    border-image-repeat: stretch;
}

Три вышеприведенных свойства border-image могут быть сокращены какborder-image: linear-gradient(45deg, gold, deeppink) 1;

Получил следующий результат:

image

радиус границы недействителен

Посмотрите внимательно на демонстрацию выше, установитеborder-radius: 10pxНо реальное исполнение не имеет закругленных углов. использоватьborder-imageСамая большая проблема в том, что наборborder-radiusне удастся.

Мы не можем получить градиентную границу со скругленными углами. Причина, см. официальную спецификацию W3C, объясняется следующим образом:

Фон блока, но не его изображение границы, обрезается до соответствующей кривой (как определено параметром background-clip). Другие эффекты, которые обрезаются до границы или края заполнения (например, «переполнение», отличное от «видимого»). также должен обрезаться по кривой.Содержимое заменяемых элементов всегда обрезается до кривой края содержимого.Кроме того, область за пределами кривой края границы не принимает события мыши от имени элемента.

Для этого нам нужно найти другой способ или немного улучшить его и получить градиентную границу со скругленными углами.

Способ 1: фоновое изображение + псевдоэлемент

Первый способ мы больше не используемborder-image, вместо этого используйтеbackground-image+ псевдоэлементная схема, которая тоже есть вborder-imageСпецификация не приводится для наиболее распространенного метода.

Очень просто, простая схема выглядит следующим образом:

bgof

использоватьbackground-imageРеализуйте градиентный фон, а затем создайте градиентную границу, наложив белый фон.

Демонстрация CodePen -- bg + переполнение для достижения градиентной границы

недостаток

В этой схеме есть две проблемы: первая — это использование еще двух элементов (разумеется, ::before и ::after), а вторая самая фатальная — если требуется, чтобы фон внутри рамки был прозрачным, то это схема больше не работает.

Метод 2, используйте background-clip для достижения

Второй способ, используяbackground-clip: content-boxтак же какbackground-clip: border-boxС использованием.

background-clip:background-clip Устанавливает, выходит ли фон элемента (фоновое изображение или цвет) ниже границы. его частичное значение иbox-sizingаналогичный. в,

  • background-clip: border-boxУказывает фон настройкиbackground-imageбудет простираться до границы
  • background-clip: content-boxУказывает фон настройкиbackground-imageОбрезано по внешнему краю поля содержимого

Здесь мы устанавливаем два, используяbackground-image, поставить дваbackground-clipи сделайте границу прозрачной:

Основной CSS:

div {
    width: 200px;
    height: 100px;
    border: solid 10px transparent;
    border-radius: 10px;
    background-image: linear-gradient(#fee, #fee),
        linear-gradient(to right, green, gold);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

image

потому что используетсяbackground-clip: border-box, так тоже надоbackground-origin: border-boxЧтобы шаблон отображался полностью, вы можете попробовать отключить это свойство, чтобы понять, зачем вам это нужно.

Демонстрация CodePen — background-clip реализует градиентную границу

недостаток

Подобно первому методу, это решение не будет работать, если фон внутри границы должен быть прозрачным.

Способ 3: изображение границы + переполнение: скрыто

Этот метод также легко понять, так как он установленbackground-imageэлементborder-radiusневерный. Затем нам просто нужно добавить к нему родительский контейнер, набор родительских контейнеровoverflow: hidden + border-radiusТолько что:

<div class="border-image-overflow"></div>

.border-image-pesudo {
    position: relative;
    width: 200px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
}

.border-image-pesudo::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
}

Эффект следующий:

image

Конечно, здесь есть еще один элемент, который нужно достичь. Есть еще один способ, который можно реализовать без лишних элементов:

Способ 4: граница изображения + клип-путь

уже настроенbackground-imageэлементborder-radiusневерный. Но в CSS есть и другие способы создания контейнера со скругленными углами, и это с помощьюclip-path.

clip-path, очень интересное свойство CSS.

Свойство CSS clip-path создает область отсечения, в которой может отображаться только часть элемента. Часть внутри области отображается, а часть вне области скрыта. Области отсечения — это пути, определяемые встроенными URL-адресами или внешними SVG, на которые есть ссылки.

Короче говоря, здесь нам нужно толькоborder-imageна основе повторного использованияclip-pathВырежьте прямоугольный контейнер с закругленными углами:

<div class="border-image-clip-path"></div>

.border-image-clip-path {
    position: relative;
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0 round 10px);
}

объяснять:clip-path: inset(0 round 10px).

  • clip-path: inset() — это прямоугольный клип
  • Есть много применений inset(), здесьinset(0 round 10px)Его можно понимать как реализацию размера родительского контейнера (полностью подходящего, центрированного по вертикали и горизонтали в родительском контейнере) иborder-radius: 10px, который обрезает (то есть невидимо) все, что находится за пределами этого элемента.

Все отлично, эффект такой:

image

Конечно, вы также можете использоватьfilter: hue-rotate()Просто добавьте анимацию градиента:

clipboder

ты можешь быть со мнойCSS-InspirationСм. этот пример:

CSS-Inspiration — используйте clip-path и border-image для закругленных градиентных границ.

наконец

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

Более захватывающие и интересные эффекты CSS, добро пожаловать сюда, чтобы увидетьВдохновение для CSS. Найдите вдохновение для написания CSS здесь..

Если у вас есть какие-либо вопросы или предложения, вы можете общаться больше.Оригинальные статьи ограничены в написании и знаниях.Если в статье есть какие-либо неточности, пожалуйста, дайте мне знать.

Категории