CSS里如何做图片点击有框的效果

1. 使用CSS的:active伪类

在CSS中，使用:active伪类可以为图片添加一个短暂的点击效果，通常是边框或阴影。

img:active {
  border: 2px solid black;
}

上述代码会在图片被点击时添加一个2像素的黑色边框。如果需要鼠标离开图片时边框消失，可以将上述代码添加到:hover伪类中。

2. 使用CSS的:focus伪类

:focus伪类通常用于表单元素，但也可以用于图片元素。

img:focus {
  outline: 2px solid black;
}

上述代码为图片添加了一个聚焦样式，即在图片选择时会出现一个2像素的黑色轮廓线。

3. 使用JavaScript添加点击效果

有时候，我们需要更复杂的点击效果，例如点击时弹出一个信息框或执行其他操作。这时候，我们可以使用JavaScript来处理点击事件。

<img src="image.jpg" id="myImage">
<script>
  document.getElementById("myImage").addEventListener("click", function() {
    alert("Hello World!");
  });
</script>

上述代码在图片被点击时会弹出一个警告框。

4. 使用CSS3的transform属性实现点击效果

使用CSS3的transform属性，我们可以制作出更加复杂的点击效果，例如图片旋转或缩放。

img:hover {
  transform: scale(1.2);
}

上述代码在图片被鼠标悬停时会将其放大1.2倍。