css border-image 手机端不兼容怎么办?

Question

        <style>
            #demo {
                margin-left: 3rem;
                width: 100px;
                height: 100px;
                border-left: 3px solid;
                border-image: linear-gradient(red, blue) 1;
            }
        </style>
        
        <div style="height: 50vh;"></div>
        
        <div id="demo"></div>
        
        <div style="height: 50vh;"></div>
        

这是电脑端的效果, 显示正常

一到了手机端, 就变成这样子了...明明只设置了border-left, 在手机上却显示了整个框

手机是ios系统

Answer 1

  <style>
            #demo {
                margin-left: 3rem;
                width: 100px;
                height: 100px;
                border: 0;
                border-left: 3px solid;
                border-image: linear-gradient(red, blue) 1;
            }
        </style>
        
        <div style="height: 50vh;"></div>
        
        <div id="demo"></div>
        
        <div style="height: 50vh;"></div>

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。