css合并内边框 |css设置链接图片遮罩文字

/* 方法一：使用border-collapse属性 */
table {
border-collapse: collapse;
}
/* 方法二：使用outline属性 */
div {
border: 1px solid black;
outline: 1px solid white;
}
/* 方法三：使用伪元素:before和:after */
div {
border: 1px solid black;
}
div:before, div:after {
content: "";
display: block;
height: 0;
border: 1px solid white;
}

第一种方法适用于表格元素，通过设置border-collapse属性为collapse可以将表格的内边框合并成单一的线条。但是需要注意的是，该属性只能作用于表格元素。

第二种方法适用于普通块级元素，同时可以设置边框的颜色和大小，使得边框看起来更加美观。但是需要注意的是，该方法会在元素原有的边框基础上叠加一个白色的边框，存在一定的兼容性问题。

第三种方法使用伪元素:before和:after来模拟内边框，可以同时设置边框的颜色和大小，更加灵活。但是需要注意的是，该方法需要加上display: block才能正常显示，同时会增加DOM树的节点数。