<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } div{ width: 500px; height: auto; border: 10px solid red; margin:100px auto; /*添加邊框圖片*/ border-image-source: url("../images/btn_bg.png"); /*設置受保護的區域大小*/ border-image-slice: 10 fill; /*設置邊框圖片的寬度 1.明確圓角的大小 2.明確受保護的區域的大小*/ border-image-width: 10px; /*設置背景平鋪效果 默認是stretch：拉伸 寬要和上面的邊框的寬度一致*/ border-image-repeat: stretch; } </style> </head> <body> <div>邊框圖片的本質是背景，並不會影響元素內容的放置邊框圖片的本質是背景，並不會影響元素內容的放置邊框圖片的本質是背景，並不會影響元素內容的放置邊框圖片的本質是背景，並不會影響元素內容的放置邊框圖片的本質是背景，並不會影響元素內容的放置邊框圖片的本質是背景，並不會影響元素內容的放置邊框圖片的本質是背景，並不會影響元素內容的放置邊框圖片的本質是背景，並不會影響元素內容的放置邊框圖片的本質是背景，並不會影響元素內容的放置邊框圖片的本質是背景，並不會影響元素內容的放置</div> </body> </html>
是不是很簡單啊，0.0. 這是九宮格樣式的背景圖片