css实现大屏效果的背景div

实现大屏效果的背景div, 效果如下:

html

 <div class="box">1111111</div>

.box {width: 200px;height: 80px;background: linear-gradient(270deg, #00cda2, #00cda2) 0 0 no-repeat,linear-gradient(180deg, #00cda2, #00cda2) 0 0 no-repeat,linear-gradient(270deg, #00cda2, #00cda2) 100% 0 no-repeat,linear-gradient(180deg, #00cda2, #00cda2) 100% 0 no-repeat,linear-gradient(270deg, #00cda2, #00cda2) 0 100% no-repeat,linear-gradient(180deg, #00cda2, #00cda2) 0 100% no-repeat,linear-gradient(270deg, #00cda2, #00cda2) 100% 100% no-repeat,linear-gradient(270deg, #00cda2, #00cda2) 100% 100% no-repeat;box-shadow: inset 0 0 12px 0 rgba(82, 255, 226, 0.23);background-size: 2px 8px, 8px 2px, 2px 8px, 8px 2px;background-color: rgba(184, 36, 36, 0.45);border-color: rgba(64, 203, 144, 0.4);
}

css实现大屏效果的背景div相关推荐

react + dataV + three.js + blender 实现3D可视化大屏效果
效果图 3D 可视化展示是一个很不错的方向,但是纯three.js 开发效率低,简单展示类的可视化,可以考虑使用blender 等3D 绘制工具,快速,高效. 文章目录效果图前言一.DataV ...
css rem 大屏开发_px/em/rem的区别与应用
1px有多大? 我们先了解几个概念: 关键概念设备像素:设备屏幕实际拥有的像素点一般来说:宽度方向有1920个像素点,长度方向有1080个像素点.逻辑像素:CSS 的像素单位(就是我们这次要讨论的c ...
完爆Excel表格的酷炫大屏效果，可视化还能这么玩？
有人问我,类似于阿里.腾讯这样的大公司,会招专门做可视化的人吗? 大家应该知道,做数据可视化的核心部分在于展示,但是数据的核心部分在于数据分析. 所以你应该只听过数据分析岗位,而没有听过可视化岗位吧. ...
轻松可视化实现设备监控大屏效果
简介: 前期团队一直在搭建与云端服务器对接的事情,近期终于落地,数据采集中心实现了服务端与可视化编辑器的融合,整个案例中脚本就两百行左右,基本通过可视化平台配置完成,体现我们平台的高效性.今天通过本案 ...
css rem 大屏开发_px和em、rem单元如何选择？
通常在网站开发过程中,会遇到一系列的问题,尤其是现在终端设备丰富的今天来说,在相对字体里面通常有三种字体单位不知道让开发人员如何进行选择?分别是px和em.rem.跟着我们往下看! 网站建设并非工业设 ...
基于VUE + Echarts 实现可视化数据大屏效果展示大数据
前言
CSS实现骨架屏 Skeleton 效果
转自:掘金 - CodingStartup起码课 https://juejin.cn/post/6916748944789733390 现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方 ...
【CSS】骨架屏 Skeleton 效果
点击上方关注前端技术江湖,一起学习,天天进步现在很多网站在加载数据的时候,为了避免页面过于空白,都会用这种方式预告将会有内容载入,从而提升用户体验: 这个效果中文叫作骨架屏,英文叫 Skeleto ...
【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞大屏自适应缩放解决方案 =＞使用transform:scale =＞组件化抽离ScaleBox=＞【两分钟实现大屏宽高等比例】
如果累了就冬眠吧,如果睡不着,就接纳暂时的失眠,不强迫自己入睡. 目录一.大屏简介 1.数据可视化 2.大屏用途 3.大屏效果展示二.大屏需求分类 1.固定尺寸的"真实"大屏 ...

css实现大屏效果的背景div

css实现大屏效果的背景div相关推荐

最新文章

热门文章