Как я могу получить 2 исчезающие границы справа и слева от div (с начальной загрузкой сетки) - PullRequest
Новая
       46

Как я могу получить 2 исчезающие границы справа и слева от div (с начальной загрузкой сетки)

2 голосов
/ 26 сентября 2019

В основном я хотел сделать div, где правая и левая границы исчезают.Таким образом, верхний правый и нижний правый границы должны почти исчезнуть, а средний правый край должен быть полностью белым.Это сложно объяснить, но лучше увидеть с помощью картинки.

https://gyazo.com/5d5c29c6406ebdf5681341728b6908b4

Это в основном то, что я хочу сделать, но сейчас я получаю вот что:

https://gyazo.com/f4cecd5ba3c59b9a7001272d229a3de9

Я гуглилмного разных способов найти кого-то с похожей проблемой.Люди продолжают говорить, что наложение градиента на границу не так хорошо, как наложение градиента на фоны, но я не очень хорошо знаком с градиентами, поэтому я в действительности не знаю, что делаю.

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

ЭтоКстати, это мой первый пост, посвященный стековому потоку, поэтому я прошу прощения, если он не полностью, как должен быть, или я сделал что-то не так.

HTML: 

<div class="row row2 justify-content-center">
 <div class="col-md-4 outerInterest align-content-end"><span>
<a href="">Test Left Side</a></span></div>
 <div class="col-md-3 innerInterest align-self-center"><span>
<a href="">Test Middle block</a></span></div>
 <div class="col-md-4 outerInterest align-content-start"><span>
<a href="">Test Right Block</a></span></div>
</div>

Scss: 

 $primary: #3376aa;
 $lightblue: lightblue;
 $white: white;

.row2{
  text-align: center;
  background-color: $primary;
  border: solid 1px $lightblue;

  .outerInterest, .innerInterest{
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .innerInterest{
    border: solid 1px $white;
    border-image: linear-gradient
(to top, $white, rgba(0, 0, 0, 0)) 1 100%;
    }

  span{
    color: white;
  }
  span:hover{
    opacity: .4;
    transition: all 0.3s ease-out;
  }

  a{
    text-decoration: none;
    color: $white;
  }
}

Я ожидал, что смогу изменить эту строку: 

border-image: linear-gradient
(to top, $white, rgba(0, 0, 0, 0)) 1 100%;

На это: 

border-image: linear-gradient
(to center, $white, rgba(0, 0, 0, 0)) 1 100%;

Но, как я понял, это было не таклегко.

...