虽然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;
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
607
收藏
