我有以下CSS风格:
.iconBorder{
border : 3px solid #0aaaa0;
border-style: dotted;
}
我将上述样式应用于 img 标签,如下所示:
<img class="iconBorder" src="images/svg/address.svg" height="50px">
但是样式似乎没有在浏览器中呈现,如果我将其作为内联 CSS 提供,它可以工作:
<img class="iconBorder" style="border : 3px solid #0aaaa0;border-style: dotted;" src="images/svg/address.svg" height="50px">
我错过了什么?,帮我弄清楚,提前谢谢。
如果你把你的CSS添加到它应该在的地方,这是:
在样式标记内:
<style type="text/css">
.iconBorder {
border: 3px solid #0aaaa0;
border-style: dotted;
}
</style>
包含在引用 html 文档头部的.css文件中:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mysitestyle.css">
</head>
<body>
...
</body>
</html>
</head>
或者像您已经做的那样内联。
您的代码应该完全正常工作,并且您完全没有问题。
此处代码中的工作 CSS 示例。
您可以使用此代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="mysitestyle.css">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.iconBorder {
border: 3px solid #0aaaa0;
border-style: dotted;
}
</style>
</head>
<body>
<img class="iconBorder" src="https://www.w3schools.com/images/picture.jpg" height="50px">
<img class="iconBorder" src="https://www.w3schools.com/images/picture.jpg" height="50px">
</body>
</html>