用css写一个黑背景对话框 要漂亮 大气
以下是一个黑背景的对话框的CSS示例:
.dialog-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
max-width: 90%;
background-color: #000;
color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.dialog-box h2 {
font-size: 2em;
margin-top: 0;
}
.dialog-box p {
font-size: 1.2em;
margin-bottom: 20px;
}
.dialog-box button {
background-color: #fff;
color: #000;
border: none;
padding: 10px 20px;
font-size: 1.2em;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.dialog-box button:hover {
background-color: #555;
color: #fff;
}
使用示例:
<div class="dialog-box">
<h2>标题</h2>
<p>这是一段内容</p>
<button>确定</button>
</div>
你可以根据需要调整宽度、字体大小、颜色等属性以达到你想要的效果。
原文地址: https://www.cveoy.top/t/topic/bH9H 著作权归作者所有。请勿转载和采集!