Линейные градиентные границы

Я хочу добиться этих линейных градиентных границ с помощью CSS. Я попробовал добавить это:

.demo-mode {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%);
  box-shadow: inset 0 100vw #111026;
  border: 1px solid transparent;
  border-radius: 24px;
}

Но это показывает мне левую и правую границы, а также нижнюю границу, а не верхнюю.

.wrapper {
padding: 20px;
background: #111026;
}
.demo-mode {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%);
  box-shadow: inset 0 100vw #111026;
  border: 1px solid transparent;
  border-radius: 24px;
  width: 250px;
  height: 250px
}

<div class = "wrapper">
<div class = "demo-mode"></div>
</div>

Не могли бы вы адаптировать этот ответ к своему варианту использования? stackoverflow.com/a/53037637/12571484

— 18.06.2024 15:55

html css linear-gradients

18.06.2024 15:28

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

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

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

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

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

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

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

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

Ответы 1

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

Вы можете исправить это, добавив:

background-origin: border-box;

бордюр
Фон располагается относительно рамки.

Здесь вы можете найти дополнительную информацию о background-origin.

Пример:

.wrapper {
  padding: 20px;
  background: #111026;
}

.demo-mode {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0) 62.72%);
  background-origin: border-box;
  box-shadow: inset 0 100vw #111026;
  border: 1px solid transparent;
  border-radius: 24px;
  width: 250px;
  height: 250px
}

<div class = "wrapper">
  <div class = "demo-mode"></div>
</div>

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

— 19.06.2024 10:33

18.06.2024 15:55

Другие вопросы по теме

Попутный ветер/CSS: почему мой div не соответствует ширине изображения, а расширяется до большей ширины?

Как выровнять текст в контейнере по центру по вертикали и по центру по горизонтали

Создание диалогового окна в скрипте приложений Google для листов Google с использованием HTML

Использование изображения в середине текста

Как исправить положение стрелки в этой пользовательской хлебной крошке на основе Bootstrap 5.2.0?

Размер сетки не изменяется по ширине элементов

Разница в поведении переполнения флексбокса между React и React Native

SVG текстура плиточная плоскость

Есть ли способ сделать цвета ярче в CSS?

Флажки формы Bootstrap 5.3.0 имеют разную ширину

Линейные градиентные границы

Ответы 1

Пример:

Другие вопросы по теме

Похожие вопросы