// React+tailwind.css
      <span
        className={twMerge(classNames(
            "text-xl ml-1.5 px-3.5 w-[50px] h-[44px]",
            "inline-flex items-center justify-center",
            "border-2 rounded-l-xl  border-dashed border-pri-2",
            "text-pri-2 bg-pri-8",
            className
          )
        )}
        style={style}
        key={key}
        id={id}
      >
        {QUESTION_MARK}
      </span>

設(shè)計圖效果

iPhone 7p上實際效果

在部分iOS設(shè)備上，當(dāng)border設(shè)置為dashed時，有些border 顯示不全

open AI 給的回復(fù)如下：

1. 子像素渲染問題
   在某些情況下，iOS 瀏覽器對 子像素值 的渲染會導(dǎo)致邊框缺失或顯示異常。

原因： CSS 中的某些屬性（例如寬度 w-[50px]、高度 h-[44px]、邊框 border-2）在實際渲染中會產(chǎn)生浮點數(shù)值（如 49.9px），導(dǎo)致邊框被忽略或未完全渲染。
解決方案： 確保寬度和高度是整數(shù)值，并避免浮點運算。

2. border-dashed 樣式在某些情況下的渲染問題
   border-dashed 在 iOS 上的渲染有時會不完整，特別是當(dāng)邊框?qū)挾容^小時。

原因： iOS WebKit 渲染 dashed 邊框時可能出現(xiàn)圖形精度問題，導(dǎo)致某些邊框段不顯示。
解決方案： 改用 border-solid 測試是否是 border-dashed 的問題。

3. inline-flex 與 border 的渲染沖突
   inline-flex 的父子元素布局渲染在某些情況下可能會導(dǎo)致邊框缺失，特別是在父元素寬度不足時。

原因：
inline-flex 的寬度可能受到內(nèi)容大小的限制，導(dǎo)致布局計算錯誤。
如果 w-[50px] 和 inline-flex 沖突（例如寬度不足以完全顯示邊框），右側(cè)的邊框可能會被剪裁。
解決方案：
將 inline-flex 替換為 flex 或設(shè)置明確的寬度：
inline-flex w-[50px] /* 確保寬度足夠 */
或者添加 overflow: visible; 防止裁剪：
overflow: visible;

4. iOS 渲染引擎的 Bug
   某些版本的 iOS 瀏覽器（如 Safari）可能存在邊框渲染的 Bug，尤其是與 rounded 和 border-dashed 結(jié)合使用時。

原因： iOS WebKit 在渲染 rounded 和 dashed 的邊框時，可能會因為抗鋸齒或浮點計算問題導(dǎo)致右側(cè)邊框不顯示。
解決方案：
改變邊框樣式，使用 border-solid 或移除rounded：
border-solid
rounded-none

其中嘗試

1. 增大w的寬度，無效，改變border寬度無效
2. 修改broder-dashed 為 border-solid 確實可以顯示出完整的border
3. 添加overflow: visible無效
4. 使用rounded-none無效，使用rounded-sm有效

由于需求要求用dashed border，所以最終添加了rounded-r-sm來解決問題

// React+tailwind.css
      <span
        className={twMerge(classNames(
            "text-xl ml-1.5 px-3.5 w-[50px] h-[44px]",
            "inline-flex items-center justify-center",
            "border-2 rounded-l-xl rounded-r-sm  border-dashed border-pri-2",
            "text-pri-2 bg-pri-8",
            className
          )
        )}
        style={style}
        key={key}
        id={id}
      >
        {QUESTION_MARK}
      </span>