我只想让图片获得焦点时,图片可以出现边框,在html中运行,请给我一个完整的用css的代码
时间: 2024-02-29 11:53:32 浏览: 17
可以使用 CSS 的 `:focus` 伪类来实现此效果。以下是一个完整的示例代码:
```html
<html>
<head>
<style>
img:focus {
outline: 2px solid blue;
}
</style>
</head>
<body>
<img src="example.jpg" alt="Example Image">
</body>
</html>
```
在上面的代码中,我们为 `img` 元素添加了一个 `:focus` 伪类选择器。这意味着当图片获得焦点时,即被点击或通过键盘导航到时,它将应用指定的 CSS 样式。在这种情况下,我们将 `outline` 属性设置为 2 像素的蓝色实线,以在图片周围创建一个边框。
请注意,这个代码中的 `outline` 属性只在图片获得焦点时才出现。如果您希望始终显示边框,请改用 `border` 属性。