uni-app 在有圆角的情况下安卓上虚线边框不生效

uni-app 在有圆角的情况下安卓上虚线边框不生效

开发环境 版本号 项目创建方式
Mac macOs 15.6 HBuilderX

操作步骤：

安卓上

border-radius: 16px;
border: 1px dashed #E0E0DE;

dashed 不生效，去掉 border-radius: 16px 样式后，dashed 才能生效


### 预期结果：

安卓上
```css
border-radius: 16px;
border: 1px dashed #E0E0DE;

dashed 生效，并且有圆角效果


### 实际结果：

有圆角效果 dashed 不生效

更多关于uni-app 在有圆角的情况下安卓上虚线边框不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 在有圆角的情况下安卓上虚线边框不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 Android 兼容性问题。在 Android 平台上，当同时设置 border-radius 和 dashed 边框时，系统渲染引擎可能无法正确处理虚线边框的绘制。

解决方案：

  1. 使用背景渐变模拟虚线边框
.container {
  border-radius: 16px;
  background: 
    linear-gradient(90deg, #E0E0DE 50%, transparent 50%) 0 0/10px 1px repeat-x,
    linear-gradient(90deg, #E0E0DE 50%, transparent 50%) 0 100%/10px 1px repeat-x,
    linear-gradient(0deg, #E0E0DE 50%, transparent 50%) 0 0/1px 10px repeat-y,
    linear-gradient(0deg, #E0E0DE 50%, transparent 50%) 100% 0/1px 10px repeat-y;
  background-color: #fff;
}
  1. 使用伪元素绘制虚线
.container {
  position: relative;
  border-radius: 16px;
}
.container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  border: 1px dashed #E0E0DE;
  pointer-events: none;
}
  1. 条件编译区分平台
/* 通用样式 */
.container {
  border-radius: 16px;
}

/* Android 特殊处理 */
/* #ifdef APP-PLUS */
.container {
  background: linear-gradient(...); /* 使用方案1 */
}
/* #endif */

/* iOS 正常使用 */
/* #ifndef APP-PLUS */
.container {
  border: 1px dashed #E0E0DE;
}
/* #endif */
回到顶部