css点击按钮显示边线

CSS是一种网页样式设计语言，可以实现很多炫酷的效果。今天，我们来一起学习如何通过CSS点击按钮显示边线。

首先，我们需要在HTML中创建一个按钮。在按钮中添加一个id属性，方便我们在CSS中选中该按钮并进行样式设置。代码如下：

<button id="myBtn">点击显示边框</button> 

接下来，我们可以在CSS中对该按钮进行样式设置。首先给按钮添加基本样式，比如背景色、字体颜色、边框等。代码如下：

#myBtn {
  
  background-color: #4CAF50;
  
  border: none;
  
  color: white;
  
  padding: 15px 32px;
  
  text-align: center;
  
  text-decoration: none;
  
  display: inline-block;
  
  font-size: 16px;
  
  border-radius: 5px;
}
 

在完成基本样式设置之后，我们可以添加一个悬停效果，即当鼠标悬停在按钮上时，按钮会变为另一种样式。代码如下：

#myBtn:hover {
  
  background-color: #3e8e41;
}
 

接下来，我们来实现CSS点击按钮显示边线的效果。我们需要使用JavaScript来实现这一效果。代码如下：

document.getElementById("myBtn").addEventListener("click", function(){
  
  this.style.outline = "2px solid red";
}
);
 

这段JavaScript代码使用了addEventListener()方法来添加点击事件。在点击事件中，我们设置按钮样式的outline属性，将其设置为“2px solid red”，即显示一个2px宽的红色实线边框。

经过以上设置，我们就可以实现CSS点击按钮显示边线的效果了。快来试试吧！