uni-app border-image 运行真机无效果

uni-app border-image 运行真机无效果

开发环境 版本号 项目创建方式
Windows windows7 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows7

HBuilderX类型：正式

HBuilderX版本号：3.3.11

手机系统：iOS

手机系统版本号：iOS 15

手机厂商：苹果

手机机型：iphone13

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

``` html
<template>  
    <view>  
        <view style="border-image: url(/static/logo.png);border: 70rpx solid transparent;padding: 20rpx;">  
            123123  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  

</style>

操作步骤： 代码如上

预期结果： 显示边框图片

实际结果： 无边框图片

bug描述： css样式border-image运行到手机无效果


更多关于uni-app border-image 运行真机无效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

把 border-image 写在 border 后面，实测 13 可以显示，另外为了兼容不同版本的系统不要设置颜色为透明。如果是 vue3 上没有显示，则可以使用类名的形式书写样式。

更多关于uni-app border-image 运行真机无效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html


关于uni-app中border-image在真机无效的问题，主要原因如下：

  1. 兼容性问题：border-image在部分移动端浏览器支持度有限，特别是iOS设备上可能存在兼容性问题。

  2. uni-app的样式处理：uni-app在编译时会处理部分CSS属性，border-image可能没有被正确编译到原生样式。

  3. 路径问题：在移动端使用相对路径时，可能需要使用绝对路径或base64编码的图片。

替代解决方案：

  1. 使用背景图片模拟边框效果：
.border-box {
  position: relative;
  padding: 20rpx;
}
.border-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 70rpx solid transparent;
  background: url(/static/logo.png) repeat;
  background-size: 70rpx 70rpx;
  pointer-events: none;
}
  1. 使用base64编码图片：
border-image: url(data:image/png;base64,...);
回到顶部