在网页中，我们常常需要给一些元素添加点击效果，以增强用户体验。而CSS提供了一种非常方便的方法，可以在元素被点击时，在其周围创建一个边框。这种效果常常用于按钮、链接和表单元素等。
button:hover {
border: 2px solid red;
}
以上代码可以让按钮在鼠标悬停时出现红色的边框。这里的关键是:hover伪类选择器，表示当鼠标悬停在按钮上时应用该样式。
a:focus {
outline: 2px solid blue;
}
类似的，以上代码可以让链接在被点击后出现蓝色的虚线边框。这里使用:focus伪类选择器，表示在元素获得焦点时应用该样式。
input[type="text"]:active {
border: 2px solid green;
}
最后一个例子则是让文本输入框在鼠标按下时出现绿色边框。这里使用:active伪类选择器，表示当元素被激活（鼠标按下）时应用该样式。
需要注意的是，以上样式可能会影响到页面的可访问性。为了确保所有用户都能够正常地使用网站，建议不要完全依赖视觉效果来传递信息。同时，如果页面中使用了该效果，请考虑为其添加键盘焦点样式，以便于键盘用户的导航。
