Градиентная граница css с прозрачностью

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

Это код, который я использую на данный момент:

.gradient-circle {
  --b: 5px; /* border width*/

  display: inline-block;
  margin: 10px;
  z-index: 0;

  width: 26rem;
  height: 26rem;
}

.gradient-circle:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c, linear-gradient(to top, #5454d4, rgba(249, 116, 104)));
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--b) - 1px),
    #fff calc(100% - var(--b))
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--b) - 1px),
    #fff calc(100% - var(--b))
  );
  border-radius: 50%;
}

Это граница, которую я получаю, используя приведенный выше CSS:

Вот как должен выглядеть круг:

css border css-gradients css-mask

16.12.2020 13:36

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

456

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте 2 слоя маски в сочетании с mask-composite

.gradient-circle {
  --b: 5px; /* border width*/

  display: inline-block;
  margin: 10px;
  z-index: 0;

  width: 26rem;
  height: 26rem;
  position:relative;
}

.gradient-circle:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c, linear-gradient(to top, #5454d4, rgba(249, 116, 104)));
  -webkit-mask: 
  linear-gradient(45deg,#fff,transparent 80%),
  radial-gradient(
    farthest-side,
    transparent calc(100% - var(--b) - 1px),
    #fff calc(100% - var(--b))) content-box;
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  border-radius: 50%;
  padding:1px;
}

body {
  background:#f2f2f2;
}