背景在默认的情况下会延伸到边框的下方,当边框为透明或者虚线时可以看出这一效果。

使用background-clip属性可以解决这一问题。
background-clip: padding-box;
background-clip的值为padding-box时,表示背景从内边距部分开始渲染,不会影响到边框部分。

所以,当底部背景为一张图片的时候,可以实现透明颜色的边框
border: 8px solid rgba(255,255,255,.6);
background-clip: padding-box;

网友评论