如何修复仅在 ios 而不是 android 上发生的虚线边框错误？

Posted 2023-02-23

【中文标题】如何修复仅在 ios 而不是 android 上发生的虚线边框错误？

【英文标题】：How can i fix a bug with my dotted border that only happens on ios and not android?

【发布时间】：2019-04-30 08:14:58

【问题描述】：

我正在为我的移动应用程序创建一个虚线边框，在 android 上边框显示正确，但在 ios 上它显示为小方块（块）而不是点 这个 vl 是在表单周围创建边框的类

<form>
<div class="v1">


  <div style="margin-top: 10.5%; " class="hl"></div>

  <ion-card class="secondaryCard" *ngIf="AccountNotEmpty">
  </ion-card>

 </div>

  <ion-grid>
    <ion-row>
      <ion-col>
        <div class="endBorder" style="opacity: 0.9"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.8"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.7"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.6"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.5"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.4"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.3"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.2"></div>
      </ion-col>
      <ion-col>
        <div class="endBorder" style="opacity: 0.1"></div>
      </ion-col>

    </ion-row>
  </ion-grid>
</div>
</form>

这是我用来创建边框的 vl 类

.v1
border-color: white !important;
border-left: dotted thick;
border-width: 5px !important;
// border-bottom: dotted ;
height: auto;
//padding-left: 10%;
margin-left: 3%;
position: relative;

【参考方案1】：

虚线边框在不同浏览器上的呈现方式可能略有不同。如果边框很小，通常甚至不可见，但边框宽度为严重像素，它是。有些将边框呈现为完美的正方形，有些则呈现为圆形。

如果这对您的设计至关重要并且您想要一个一致的跨浏览器解决方案，您可以使用border-image 属性。因此，您创建一个带有圆形边框元素的图像文件，然后在 CSS 中将其用作您的边框。有一个很好的解释 here，它显示了如何做到这一点。