1.普通状态2，鼠标hover状态 3.active 点击状态 4.focus 取得焦点状态
focus 经常用来取消a链接点击后产生的虚线边框
a:focus{
outline: none;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="gbk">
<style type="text/css">
.btn {
color: white;
background-color: #008aa6;
padding: 0px 1em;
height: 22px;
margin-left: 10px;
border: 0px solid black;
border-radius: 5px;
}
.btn:hover {
background-color: #ff0000;
}
/*active 要在后面 否则会被hover覆盖*/
.btn:focus {
background-color: #00ff00;
}
.btn:active {
background-color: #000000;
}
</style>
</head>
<body>
<button class="btn">hehhe</button>
</body>
</html>
848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
