UI妹子说我用CSS实现毛玻璃效果的样子很帅
要实现毛玻璃效果,可以使用CSS中的box-shadow
和border-radius
属性。以下是一个简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>毛玻璃效果示例</title>
<style>
.glass {
width: 200px;
height: 200px;
background-color: #fff;
border-radius: 10px; /* 圆角 */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* 阴影 */
text-align: center;
line-height: 200px;
color: #000;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="glass">毛玻璃效果</div>
</body>
</html>
这段代码会创建一个带有毛玻璃效果的div
元素,背景色可以根据实际需求调整。阴影的大小、模糊半径以及颜色都可以根据你的设计需求进行调整。
评论已关闭