雖然CSS3新增了這個功能，但是在W3school里面并沒有給出具體詳細的解釋，還好網上不乏大神給你我們很全面的解釋其中的原理-css3：border-image邊框圖像詳解

邊框圖片的原理是四個角不變，邊拉伸或平鋪，border-image-slice:27 27 27 27（可以縮寫，同內外邊距），距離各邊向內偏移的距離后切割

?

按照此方法需要進行自己的borderimg的制作（類似于sprite）

（21+1+21）

如上，一個像素邊框在PC端顯示沒有任何問題，但是按照?走向視網膜（Retina）的Web時代?中對一個像素在ritina中的解釋，會分為四個設備像素來顯示，所以產生一模糊虛邊，導致內部產生了一個虛框，如圖上

代碼為border:solid 21px transparent; border-image:url("corner.png") 21 round;

為了解決這個問題，需要對原始圖片做一些處理，四邊各留出一個像素的空白，如圖下

（[1+21]+1+[21+1]）

代碼為border:solid 22px transparent; border-image:url("corner2.png") 22 round;

?

轉載于:https://www.cnblogs.com/gulei/p/5283785.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的CSS3边框图片-像素虚边的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。