如何在CSS中创建类似示例的白盒？
如何在CSS中创建类似示例的白盒？
提问于 2020-11-23 17:47:33
我试图创建一个类似示例的白框，当我单击一个按钮(Web开发、软件工程、系统管理)时，它会显示信息。我想要一个关于CSS的提示，还有，我需要一个JavaScript吗？
回答 3
Stack Overflow用户
发布于 2020-11-23 17:59:49
是像这样吗？
.box{
margin:40px;
position: relative;
box-shadow: 0 0 30px rgba(0,0,0,0.4);
padding: 30px;
}
.box:before{
content: "";
position:absolute;
top: -30px;
left: 50px;
border: 15px solid transparent;
border-bottom-color: white;
}<div class="box">
Some content about development
</div>
Stack Overflow用户
发布于 2020-11-23 17:54:56
希望这能对你有所帮助。可以在.css上编辑详细信息。
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>W3.CSS Modal</h2>
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span>
<p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p>
</div>
</div>
</div>
</div>
</body>
</html>
指向测试here的链接
Stack Overflow用户
发布于 2020-11-23 18:12:49
我认为：
.container p {
text-align: center;
vertical-align: center;
color: #fff;
font-family: sans-serif;
border-radius: 10px;
background-color: #FF2000;
width: 200px;
height: 110px;
padding-top: 90px;
}<div class="container">
<p>Your Text</p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64966014
复制相关文章
相似问题
腾讯云开发者
