Ошибка границы Safari - PullRequest
Новая
       30

Ошибка границы Safari

0 голосов
/ 03 апреля 2019

Мне нужно сделать блок-цитату левой границы с градиентом.Но в Safari он отображается с обеих сторон.Я попытался сделать границы справа 0 и ничего.Также я попытался использовать префикс -webkit-.

Вот как это выглядит в Safari: safari И Chrome: chrome

Codepen: https://codepen.io/domanskyi/pen/xewQNb

HTML: 

<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora nam itaque nesciunt omnis, ut nihil veritatis adipisci corrupti velit. Reiciendis dolorem suscipit numquam expedita iure eum labore eos maxime rerum.</div>

CSS: 

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
}

.content {
  width: 320px;
  height: 100px;
  color: #333;
  background-color: #fff;
  padding: 10px;  

  border-left-style: solid;
  -webkit-border-left-style: solid;

  border-width: 0 0 0 3px;
  -webkit-border-width: 0 0 0 3px;

  border-image: linear-gradient(to bottom,  #D71F49 0%, #2E3D59 100%) 1 100%;

  border-right-width: 0px !important;
  -webkit-border-right-width: 0px !important;

  border-right: 0px !important;
  -webkit-border-right: 0px !important;

  border-right: none !important;
  -webkit-border-right: none !important;

  border-image-repeat: none;
}

Ответы [ 2 ]

1 голос
/ 03 апреля 2019

Я не вижу ничего плохого в вашем коде, но он значительно упростил его, и он заработал в Safari для меня так же: https://codepen.io/RwwL/pen/JVYzox

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
}

.content {
  width: 320px;
  height: 100px;
  color: #333;
  background-color: #fff;
  padding: 10px;
  border-style: solid;    
  border-width: 0 0 0 3px;
  border-image: linear-gradient(to bottom,  #D71F49 0%, #2E3D59 100%) 1 100%;
  border-image-repeat: none;
}
0 голосов
/ 03 апреля 2019

Итак, я сдался и сделал это с псевдоклассом) 

.content2 {
  position: relative;
  width: 320px;
  height: 100px;
  color: #333;
  background-color: #fff;
  padding: 10px;    
}

.content2::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 3px;
  height: 100%;
  background-image: linear-gradient(to bottom,  #D71F49 0%, #2E3D59 100%);
}
...