css单击可弹窗效果 |css中字体超出部分隐藏

.popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 200px;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.btn {
display: inline-block;
background-color: #222;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
}
.btn:hover {
background-color: #444;
}
.btn:focus + .overlay {
display: block;
}
.btn:focus + .overlay + .popup {
display: block;
}

以上代码中，在HTML代码中，大家添加了一个按钮和两个层次结构。当用户单击按钮时，将显示遮罩层，当用户单击遮罩层时，将会显示弹窗层。

CSS代码中，大家为遮罩层和弹窗层分别设置了display:none，这将使它们在页面加载时将隐藏起来。大家还为按钮设置了一个:focus伪类，当用户单击该按钮时，将设置遮罩层和弹窗层的display属性为block，这将导致它们现在在页面上可见。

最后，大家为弹窗层添加了一些样式属性，例如设置它的位置、大小、背景颜色和边框等属性。这样大家就可以实现CSS单击可弹窗效果啦！