CSS边框左不起作用的safari我该怎么做

Question

border left在Safari 上不起作用

它非常适合Chrome浏览器。

Safari不支持左边框？

代码：

.card-txt {
text-align: left;
font-size: 0.85rem;
margin-top: 40px;
margin-left: 30px;
border-left-style: solid;
border-color: white;
border-image-source: linear-gradient(to bottom, #c88cff, #9c5bd8);
padding-left: 10px;
font-style: italic;
height: 40px;
width: 240px;
margin-bottom: 50px;
text-indent: 3px;
border-image-slice:1;
}

<div class="card-top">
<div class="card-image"><img src="clock.svg" alt="Clock" width="100" height="100"></div>
<div class="card-txt">Lorem ipsum dolor sit amet.</div>
</div>

计算机浏览器

Safari浏览器

Answer 1

我没有safari，但这段代码可能适用于

.card-txt {
text-align: left;
font-size: 0.85rem;
margin-top: 40px;
margin-left: 30px;
border-style: solid;
border-color: white;
border-image-source: linear-gradient(to bottom, #c88cff, #9c5bd8);
border-width:0 0 0 3px;
padding-left: 10px;
font-style: italic;
height: 40px;
width: 240px;
margin-bottom: 50px;
text-indent: 3px;
border-image-slice:1;
}

<div class="card-top">
<div class="card-image"><img src="clock.svg" alt="Clock" width="100" height="100"></div>
<div class="card-txt">Lorem ipsum dolor sit amet.</div>
</div>