Решено Как сделать разноцветную обводку узлов

Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
Статус
В этой теме нельзя размещать новые ответы.
Пользователь
Регистрация
4 Май 2025
Сообщения
277
как сделать обводку у узлов цветными или переливающимися
 

Вложения

  • 15506-b1d4270d790a62da9bf8739a3fb2c31b.jpg
    15506-b1d4270d790a62da9bf8739a3fb2c31b.jpg
    15.7 KB · Просмотры: 11
Решение
HTML:
<span style="color: #ff0000; text-shadow: 0 0 4px #ff0000, 0 0 10px #ff0000, 0 0 10px #ff0000;">
Все самые новые новости проекта
</span>

Итог: Посмотреть вложение 15802
Дамтиз, он врооде сказал ОБВОДКУ, а не описание :)

extra.less:
// tests
.block.block--category .block-container {
  --border-width: 2px;
  --border-radius: 10px;
 
  position: relative;
  border: var(--border-width) solid transparent;
  border-radius: var(--border-radius);
  background: inherit;     
  background-clip: padding-box;
  overflow: hidden;
  z-index: 0;
}

.block.block--category .block-container {
  border-image: conic-gradient(
    #ff0000, #ff8000, #ffff00, #00ff00,
    #00ffff, #0000ff, #8000ff, #ff00ff,
    #ff0000
  ) 1;
  border-image-slice: 1;
  animation...
Активный
Регистрация
17 Июн 2025
Сообщения
1,779
HTML:
<span style="color: #ff0000; text-shadow: 0 0 4px #ff0000, 0 0 10px #ff0000, 0 0 10px #ff0000;">
Все самые новые новости проекта
</span>

Итог: Посмотреть вложение 15802
Дамтиз, он врооде сказал ОБВОДКУ, а не описание :)

extra.less:
// tests
.block.block--category .block-container {
  --border-width: 2px;
  --border-radius: 10px;
 
  position: relative;
  border: var(--border-width) solid transparent;
  border-radius: var(--border-radius);
  background: inherit;     
  background-clip: padding-box;
  overflow: hidden;
  z-index: 0;
}

.block.block--category .block-container {
  border-image: conic-gradient(
    #ff0000, #ff8000, #ffff00, #00ff00,
    #00ffff, #0000ff, #8000ff, #ff00ff,
    #ff0000
  ) 1;
  border-image-slice: 1;
  animation: rainbowBorder 2.5s linear infinite;
}

@keyframes rainbowBorder {
  to {
    border-image-source: conic-gradient(
      #ff0000, #ff8000, #ffff00, #00ff00,
      #00ffff, #0000ff, #8000ff, #ff00ff,
      #ff0000,
      #ff0000 360deg
    );
  }
}

код в extra.less (делала ии).

Если чисто статичный цвет нужен, то:


CSS:
.block.block--category .block-container {
    border-radius: 15px;
    border: 2px solid red;
}
 
Пользователь
Регистрация
4 Май 2025
Сообщения
277
Статус
В этой теме нельзя размещать новые ответы.
Сверху