为什么 CSS border-image 在手机端会出现不兼容问题?
"border-image" 属性在 css 中可以为元素边框设置自定义图像,但在移动端,该属性存在兼容性问题。
当在 html 代码中为元素添加 "border-image" 属性时,在电脑端可以正常显示自定义边框,但在 ios 系统的移动端设备上,却会显示边框整个框。
以下修改后的 html 代码可以解决此问题:
立即学习“前端免费学习笔记(深入)”;
<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>
在修改后的代码中,增加了 "border: 0;" 这一行,其作用是将默认边框重置为 0,避免在移动端出现边框。