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. Docker compose 部署 nginx+php

    Docker compose 部署 nginx+php 拉取Docker镜像 docker pull nginx:1.21.6 docker pull php:7.4.28-fpm 创建docker- ...

  2. CSS：注册页面的编写练习

    最终效果图: html文件: <!-- * @Qusetion: * @Author: 一届书生 * @Date: 2020-04-07 08:17:36 * @LastEditTime: 20 ...

  3. iNeuOS工业互联网操作系统，民爆远程运维平台案例

    iNeuOS工业互联网操作系统,民爆远程运维平台案例 目       录 1.      概述... 2 2.      iNeuOS在民爆生产厂区和北京运维中心配置... 3 1.1         ...

  4. 深度解读《深度探索C++对象模型》之返回值优化

    接下来我将持续更新"深度解读<深度探索C++对象模型>"系列,敬请期待,欢迎关注!也可以关注公众号:iShare爱分享,自动获得推文和全部的文章列表. 没有启用返回值优 ...

  5. DataX在数据迁移中的应用

    简介: DataX在数据迁移中的应用 1. DataX定义 首先简单介绍下datax是什么.DataX是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.SqlSe ...

  6. 学术顶会再突破！计算平台MaxCompute论文入选国际顶会VLDB 2021

    ​ 简介: VLDB 2021上,阿里云计算平台MaxCompute参与的论文入选,核心分布式调度执行引擎Fangorn.基于TVR Cost模型的通用增量计算优化器框架Tempura等分别被Indu ...

  7. WPF 通过 InputManager 模拟调度触摸事件

    在 WPF 中,框架可以分为两个部分,一个是渲染,另一个是交互.交互的入口是在 InputManager 里面,而实际的交互实现需要通过渲染布局和交互的路由事件才能完成.在输入管理提供了调度事件的方法 ...

  8. 表和数据连接，而不是和表连接（JOIN）

    1.连接数据,但是顺序会受影响 在使用JOIN连接临时表或子查询时,无法保证结果的顺序与特定值的顺序完全一致.这是因为在查询过程中,数据库优化器可能会选择不同的执行计划,导致结果的顺序发生变化. SE ...

  9. zabbix-server-pgsql docker镜像说明

    0 说明 zabbix-server-pgsql在docker hub的官方说明,供查阅 1 Environment Variables 1.1 基本变量 When you start the zab ...

  10. WordPress CVE-2022-4230复现分析

    前言 开始CVE审计之旅 WP Statistics WordPress 插件13.2.9之前的版本不会转义参数,这可能允许经过身份验证的用户执行 SQL 注入攻击.默认情况下,具有管理选项功能 (a ...