<!-- 示例代码 -->
<div class="total-container">
<div class="box"></div>
<hr style="border-top: 1px solid #ccc; margin: 20px 0;">
<div class="box2"></div>
<div class="card">In this example, both box-shadow and text-shadow enhance the .card class. The two shadow layers create a neumorphic effect, while the text shadow adds contrast and</div>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
/* 示例代码 */
body {
text-align: center;
}
.total-container {
width: 500px;
padding: 20px;
min-height: 200px;
margin: 10px auto;
border: 1px dotted #363;
background-color: #e1ffff;
/* background-color: #333; */
}
.box {
height: 150px;
width: 150px;
background: #fff;
border-radius: 20px;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.box {
height: 150px;
width: 150px;
background: #fff;
border-radius: 20px;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
.box:hover {
box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.5);
transform: translateY(-5px);
}
.box2 {
height: 150px;
width: 150px;
background: #fff;
border-radius: 20px;
}
.box2 {
box-shadow:
inset -10px -10px 15px rgba(255, 255, 255, 0.5),
inset 10px 10px 15px rgba(70, 70, 70, 0.12);
}
.card {
display: none;
padding: 2rem;
border-radius: 0.5rem;
background: linear-gradient(145deg, #cacaca, #f0f0f0);
color: #764abc;
text-shadow:
-6px 6px 15px rgba(0, 0, 0, 0.5),
6px -6px 15px rgba(255, 255, 255, 0.8);
box-shadow:
20px 20px 60px #bebebe,
-20px -20px 60px white;
}
// 示例代码
console.log(["Hello 笔.COOL 控制台"])