首页html和css如何实现登录表单容器⽔平⽅向居中，垂直⽅向距顶部⼀段距离，有半透明、模糊的⽑玻璃背景，圆⻆和阴影

html和css如何实现登录表单容器⽔平⽅向居中，垂直⽅向距顶部⼀段距离，有半透明、模糊的⽑玻璃背景，圆⻆和阴影

时间: 2024-09-12 18:14:54 浏览: 39

要实现登录表单容器的水平和垂直居中，并添加半透明、模糊的毛玻璃效果，您可以结合HTML、CSS和一些CSS3新特性。首先，在HTML部分保持之前的登录表单结构不变，然后在CSS中做如下设置： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>登录页面</title> <style> .login-container { position: fixed; /* 将容器固定在视口 */ top: 50px; /* 距离顶部50像素 */ left: 50%; /* 居中X轴 */ transform: translateX(-50%); /* 向左偏移自身宽度的一半 */ width: 300px; /* 容器宽度 */ height: auto; background-color: rgba(0, 0, 0, 0.6); /* 半透明背景 */ backdrop-filter: blur(10px); /* 模糊效果 */ border-radius: 10px; /* 圆角 */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.17); /* 阴影 */ display: flex; /* 弹性盒布局 */ justify-content: center; /* 居中内容 */ align-items: center; /* 自适应垂直方向居中 */ } form { padding: 20px; } </style> </head> <body> <div class="login-container"> <form action="/submit_login" method="post"> ...  </form> </div> </body> </html> ``` 在上面的样式中： - `.login-container` 类设置了登录容器的各种样式，包括位置、尺寸、颜色、模糊效果、圆角和阴影等。 - `backdrop-filter` 属性用于给容器添加模糊效果。 - `box-shadow` 属性用于添加阴影。这样，登录表单就会呈现出您描述的效果。

阅读全文