img标签如何去除边框？

原文版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/qq_41964720/article/details/131397016

原文作者：于 2023-06-26 14:41:12 发布
————————————————————————————————————————————————————

当img标签只设置宽度和高度，不设置src属性时，可能会出现边框。可以通过CSS的否定伪类选择器`:not([src])`，将无src属性的img透明度设为0，从而消除边框。
img标签只设置了宽度和高度，没有设置src属性，图片出现了边框

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 　　<head>
 4 　　　　<meta charset="UTF-8">
 5　　　　 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6　　　　 <title>Document</title>
 7　　　　 <style>
 8 　　　　　　img{
 9 　　　　　　　　width: 100px;
10 　　　　　　　　height: 100px;
11 　　　　　　}
12 　　　　</style>
13 　　</head>
14　　<body>
15　　 <img src="" alt="">
16 　　</body>
17 </html>

image

 

 

解决的方案：

img:not([src]){
　　opacity:0;
}

使用CSS的一个否定伪类选择器，将没有src属性的img的透明度设置为0，就可以解决图片有边框的问题

 

posted @ 2025-09-16 20:11  默诺  阅读(17)  评论(0)    收藏  举报