css

body {

    background:#333333;

}

.login-card {

    text-align:center;

    width:430px;

    height:430px;

    margin:auto;

    margin-top:15vh;

    padding:30px 20px;

    border:none;

    border-radius:10px;

    background-color:hsla(0,0%,100%,.1);

    box-shadow:inset 0 0 15px 0 #fff;

}

}

html代码

<div class="login-card"></div>

css 透明气泡效果的更多相关文章

  1. JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...

  2. css实现聊天气泡效果

      --------------------------------------- css功能强大,能实现很多炫 酷的效果,今天给大家分享 用css3绘制聊天气泡的方法: -------------- ...

  3. CSS三角形/气泡的实现原理及应用

    记得第一次面试,面试官问如何用css实现一个不规则三角形?好叭 ·-·,触及到知识盲区了,手动叹气(╥﹏╥),好在别的回答的还好,没挂

  4. CSS透明代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...

  5. 兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class {  filter:alpha(opacity=50);  -moz-opacity:0.5; ...

  6. CSS透明属性详解代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 代码如下: .transparent_class { filter:alpha(opacity=50); -moz-opaci ...

  7. 纯CSS箭头,气泡

    原文地址: CSS Triangles 演示地址:CSS Triangles Demo 原文日期: 2013年8月5日 翻译日期: 2013年8月9日 本文两种实现方式: 使用或不使用 before ...

  8. HTML5实现微信聊天气泡效果

    最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...

  9. Android UI体验之全屏沉浸式透明状态栏效果

    前言: Android 4.4之后谷歌提供了沉浸式全屏体验, 在沉浸式全屏模式下, 状态栏. 虚拟按键动态隐藏, 应用可以使用完整的屏幕空间, 按照 Google 的说法, 给用户一种 身临其境 的体 ...

  10. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

随机推荐

  1. Redis 的并发竞争问题是什么？如何解决这个问题？了解 redis 事务的 CAS 方案吗？

    面试官心理分析 这个也是线上非常常见的一个问题,就是多客户端同时并发写一个 key,可能本来应该先到的数据后到了,导致数据版本错了:或者是多客户端同时获取一个 key,修改值之后再写回去,只要顺序错了 ...

  2. Linux 安装 adb环境

    一. 查看系统是否安装有adb adb或者adb version 二.通过apt-get安装adb 1. 安装adb sudo apt-get install android-tools-adb 2. ...

  3. Llama 3 开源了「GitHub 热点速览」

    近日,Meta(原 Facebook)开源了他们公司的新一代大模型 Llama 3,虽然目前只放出了 8B 和 70B 两个版本,但是在评估结果上已经优于 Claude 3 Sonnet.Mistra ...

  4. 解析 RocketMQ 业务消息--“顺序消息”

    简介: 本篇将继续业务消息集成的场景,从功能原理.应用案例.最佳实践以及实战等角度介绍 RocketMQ 的顺序消息功能. 作者:绍舒   引言 Apache RocketMQ 诞生至今,历经十余年大 ...

  5. Flink SQL 性能优化：multiple input 详解

    简介: 在 Flink 1.12 中,针对目前 operator chaining 无法覆盖的场景,推出了 multiple input operator 与 source chaining 优化.该 ...

  6. 数据的“敏捷制造”，DataWorks一站式数据开发治理范式演进

    简介: 企业大数据技术发展至今,历经了两次蜕变.第一次蜕变从最初的"小作坊"解决大数据问题,到后来企业用各类大数据技术搭建起属于自己的"大平台",通过平台化的能 ...

  7. [Go] Golang Context 包的注意点

    Golang context 包,定义了context 类型,携带截止日期,取消信号,和其它跨API请求作用域及进程间的值. 到服务器的请求应该创建一个 Context,服务器对外的调用应该接受一个C ...

  8. [FE] Quasar BEX 不同位置类型的 debug 调试方式

    科普:[FE] Quasar BEX 所有位置类型 types 不同类型调试,查看错误在不同的位置,如下图中的 4 个位置. Refer:https://quasar.dev/quasar-cli/d ...

  9. dotnet OpenXML 读取 PPT 形状边框定义在 Style 的颜色画刷

    本文来和大家聊聊在 PPT 形状使用了 Style 样式的颜色画刷读取方法 在开始之前,期望大家已了解如何在 dotnet 应用里面读取 PPT 文件,如果还不了解读取方法,请参阅 C# dotnet ...

  10. 2019-2-21-PowerShell-通过-WMI-获取补丁

    title author date CreateTime categories PowerShell 通过 WMI 获取补丁 lindexi 2019-02-21 20:39:51 +0800 201 ...