开创者教程
首页
前端开发
后端开发
数据库
数据分析
开发工具
Git 教程
测验/考试
代码笔记
登录/注册
🎁 机器学习（ML）是AI的核心驱动力！全面、实用的 机器学习（ML）教程 现已正式上线
👉 点击学习
实例代码
下载
重置
运行代码
<!DOCTYPE html> <html> <head> <title>border-image 属性</title> <style> #round { border: 10px solid transparent; padding: 15px; -webkit-border-image:url(/uploads/20250605/border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(/uploads/20250605/border.png) 30 30 round; /* Opera */ border-image: url(/uploads/20250605/border.png) 30 round; } #stretch { border: 10px solid transparent; padding: 15px; -webkit-border-image:url(/uploads/20250605/border.png) 30 30 stretch; /* Safari 5 */ -o-border-image:url(/uploads/20250605/border.png) 30 30 stretch; /* Opera */ border-image: url(/uploads/20250605/border.png) 30 stretch; } </style> </head> <body> <h1>border-image 属性</h1> <p>border-image 属性指定用作元素边框的图像：</p> <p id="round">此处图像会平铺填充区域。如有必要，图像会被重新缩放以避免分割图块。</p> <p id="stretch">此处图像会被拉伸填充区域。</p> <p>原始图像如下：</p> <img src="/uploads/20250605/border.png"> </body> </html>
运行结果：
