Блог

Главная - Вопросы по программированию - Попытка установить границу элемента в белый цвет, чтобы скрыть границу другого элемента

Попытка установить границу элемента в белый цвет, чтобы скрыть границу другого элемента

#html #css #border

Вопрос:

Я использую стилизованные компоненты с React для создания функции, которая позволяет пользователю выбирать вкладку вдоль левой стороны, которая расширяет содержимое справа, вот так:

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

Я пытаюсь установить a border-right: 1px solid white на my StyledHeadingTab (слева, когда активный), чтобы переопределить границу, которая оборачивает my StyledPanel справа (чтобы заголовок «перетекал» в панель »

 const StyledPanel = styled.div`
  padding-top: 48px;
  padding-left: 64px;
  padding-right: 64px;
  border: 1px solid lightgrey;
  width: 954px;
`;

const StyledHeadingTab = styled.div`
  max-height: 72px;
  width: 294px;
  border-top: 1px solid lightgrey;
`;

Я пытался использовать относительное позиционирование и z-индекс безрезультатно.

Комментарии:

1. У меня такое чувство, что это потому, что граница, которую вы пытаетесь сделать белой, является частью основного поля содержимого, а не окна меню. Это, конечно, означает изменение border-left этого поля, но вся его высота станет белой, и это тоже не будет работать должным образом. Это легче достижимо, если вы полностью удалите границы и создадите ребра с помощью box-shadow intsead?

2. спасибо, Роб, но не будет ли использование box-shadow просто возвращать нас к той же проблеме, потому что мне нужно, чтобы граница / тень были повсюду, за исключением небольшой области, где вкладка заголовка встречается с панелью?

3. В этом документе это точно не рассматривается, но в нем говорится о маскировании границ. Возможно, простое белое изображение будет работать с этой точной техникой? developer.mozilla.org/en-US/docs/Web/CSS/mask-border

4. Я еще раз взгляну на это — хотя я не думаю, что мог бы указать только right границу с помощью mask-border . Возможно, нужно переосмыслить мою реализацию этого!

Метки: ,