Safari 边框错误答案

【问题标题】：Safari border bugSafari 边框错误
【发布时间】：2019-04-03 23:19:45
【问题描述】：

我需要用渐变制作块引用左边框。但在 Safari 中，它显示在两侧。我试图使边界右为 0 而没有。我也尝试过使用 -webkit- 前缀。

这是它在 Safari 上的外观：和铬：

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;
}

【问题讨论】：

标签： css safari border

【解决方案1】：

我看不出你的代码有什么问题，但它大大简化了它，让我在 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;
}

【讨论】：

嗯，这在没有边框样式的情况下可以正常工作吗：实心？因为 Chrome 没有这个属性就不会渲染边框。
我也看到了。但是在边框宽度规则之上添加border-style:solid 似乎让它在Chrome/Safari/Firefox 中始终如一地工作。抱歉，目前无法启动 VM 来检查 IE/Edge。

【解决方案2】：

所以，我放弃了，用伪类做到了）

.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%);
}

【讨论】：