css - 这种不规则内边框如何实现好？

问题描述

问 题

外边框的好解决，就是1px的线。但是内边框比较麻烦，是一张PNG的不规则内边框图片，DIV的宽度高度不一定，background-size的各种都试过了，要么100%拉伸严重，要么contain只显示了一半，cover也是不行的，有什么好的实现方法？

解决方案

你可以抽象一下，估计这个框内元素一般都不少于四个。
那你可以弄两个伪元素，分别放头部和尾部，通过绝对定位将背景图定位至头部和尾部，通过 background-position控制位置，然后中间左右两侧用相同颜色的 border。需要注意伪元素的 z-index 大于 border 所在的元素。
由于没有你的图片素材，只能通过 ps 处理，所以像素和清晰度不够高，所以只能大概模拟一下。
对比你图片那个框颜色深的那几部分，我这个框虽然颜色不太好，但是位置是一样的。这样就能做到大于4个元素后，保持背景图片不拉伸变形。

这篇关于css - 这种不规则内边框如何实现好？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！