1. 前言
在Web开发中，图片是不可避免地要用到的元素之一，并且图片的交互效果对于提升用户体验有着重要的作用。本文将介绍如何使用CSS实现图片点击有框的效果，让你的图片在交互中更加生动有趣。
2. 实现思路
要实现图片点击有框的效果，主要需要用到CSS中的伪类选择器:hover和:focus，以及outline属性。
2.1 :hover和:focus伪类选择器
:hover选择器定义当鼠标指针悬浮在元素上方时的样式，:focus选择器定义当元素获得焦点时的样式，比如通过键盘 Tab 键聚焦到该元素时。
2.2 outline属性
outline属性用于定义一个可见的轮廓框，通常在元素获得焦点时出现，用于提醒用户当前处于哪个元素的状态。该属性可以设置轮廓的样式、颜色、粗细等属性。
3. 实现步骤
接下来，我们将按照以下步骤来实现图片点击有框的效果：
3.1 HTML结构
首先，我们需要在HTML页面中引入图片，并用img标签来进行展示。为了方便，我们在img标签上加上一个类名img-hover，以便后续选择器的选择。
<img class="img-hover" src="image.jpg" alt="图片">3.2 CSS样式
接下来，我们将给img:hover和img:focus添加样式，并添加一个outline边框，以实现图片有框的效果。
img:hover,
img:focus {
outline: 2px solid #333;
}
上面的代码将为img标签添加鼠标悬浮或焦点聚焦时的outline边框样式，边框的宽度为2px，颜色为黑色。
4. 示例代码
下面是完整的HTML和CSS代码：
<img class="img-hover" src="image.jpg" alt="图片">
img:hover,
img:focus {
outline: 2px solid #333;
}
5. 总结
通过上文的介绍和示例，相信大家已经知道了如何使用CSS实现简单的图片点击有框的效果。在实际的项目中，你也可以根据需求自由发挥，调整样式和边框等属性值，让图片交互效果更加丰富生动。