Нужна небольшая хитрость CSS с градиентами изображения границы - PullRequest
Новая
       73

Нужна небольшая хитрость CSS с градиентами изображения границы

0 голосов
/ 11 июня 2018

Я действительно надеюсь, что кто-то может помочь с этим.У меня есть что-то неупорядоченное в списке, с применением следующего CSS: 

ul li {
  float: left;
  /* border-right: 2px solid white; */
  border-width: 0px;
  border-right-width: 2px;
  border-style: solid;
  -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1.0), rgba(0, 0, 0, 0))) 1 100%;
  -webkit-border-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 1.0), rgba(0, 0, 0, 0)) 1 100%;
  -moz-border-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 1.0), rgba(0, 0, 0, 0)) 1 100%;
  -o-border-image: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 1.0), rgba(0, 0, 0, 0)) 1 100%;
  border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1.0), rgba(0, 0, 0, 0)) 1 100%;
}

ul li:last-child {
  border: 0;
}

Мне до сих пор удалось добиться следующего эффекта для моих блоков навигационной панели:

enter image description here

* ОДНАКО (!!), это был желаемый результат:

enter image description here

IЯ знаю, что странно иметь такие границы - но это дает мне желаемую толщину, и клиенту нужны некоторые эффектные эффекты при наведении.Надеюсь, кто-то может помочь ...

Все, что мне нужно понять, это как привести прозрачные верхнюю и нижнюю части в ...

...