HTML 和 CSS 来实现毛玻璃效果（Glassmorphism）

要使用HTML和CSS来实现毛玻璃效果，你可以创建一个带有半透明背景的元素，并添加一些内阴影和边缘圆角。以下是一个简单的例子：

HTML:




<div class="glass-effect">
  <p>这是毛玻璃效果</p>
</div>

CSS:




.glass-effect {
  width: 200px;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
  border-radius: 10px; /* 圆角 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 内阴影 */
  display: flex;
  align-items: center;
  justify-content: center;
}

这段代码创建了一个带有毛玻璃效果的div元素，背景半透明并带有轻微的内阴影。你可以根据需要调整宽度、高度、圆角大小和背景色的透明度。

HTML 和 CSS 来实现毛玻璃效果（Glassmorphism）

评论已关闭

推荐阅读