css样式单击边框 |div css 常用布局

要实现这个效果，大家需要使用CSS的:hover和:focus伪类。:hover伪类表示鼠标悬停在元素上时应用的样式，而:focus伪类表示元素获得焦点时应用的样式。

以下是一个示例代码：

.btn {
display: inline-block;
padding: 8px 16px;
border: 2px solid #346781;
border-radius: 4px;
text-align: center;
background-color: #fff;
color: #346781;
transition: all 0.3s ease-in-out;
}
.btn:hover, .btn:focus {
border: 2px solid #444444;
color: #444444;
}

在这个代码中，大家定义了一个名为.btn的类，它包含了一个元素的基本样式，包括内边距、边框、背景颜色和文字颜色。大家还使用了CSS的transition属性来给边框变化添加一个平滑的过渡效果。

然后，大家使用:hover和:focus伪类来定义当鼠标悬停或元素获得焦点时应用的样式。在这里，大家更改了边框颜色和文字颜色，使得元素看起来更加突出。

通过使用这样的CSS样式，大家可以方便地为网站中的交互元素添加单击边框效果，从而提高用户体验。