img标签如何去除边框？-尧图网站建设

📅 发布时间：2026/6/20 5:53:24

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

原文作者：grapelet_kmw于 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>

解决的方案：

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

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