效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜秒笔记</title>
<style type="text/css">
#box{
margin: 50px auto;
width: 400px;
height: 30px;
border: 1px solid #999;
}
#out{
float: right;
width: 30px;
height: 30px;
border-radius: 50%;
color: #999;
text-align: center;
font-size: 12px;
line-height: 30px;
cursor: pointer;
transition: .2s;
user-select:none;
}
#out:hover{
color: black;
}
#out:active{
background-color:rgba(0,0,0,.2)
}
</style>
</head>
<body>
<div id="box">
<div id="out">X</div>
</div>
</body>
</html>