CSS科技感四角边框

实现效果:使用before和after就可以实现,代码量不多,长度颜色都可以自己调整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            width:100%;
            height:100%;
            background:#040d32;
        }
        .border-box{
            position: relative;
            margin:300px auto;
            width:400px;
            height:300px;
            background: rgba(1, 19, 67, 0.8);
            border: 2px solid #00a1ff;
            border-radius: 8px;
        }
        .border-box::before {
            position: absolute;
            top: -2px;
            bottom: -2px;
            left: 30px;
            width: calc(100% - 60px);
        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/39605.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL数据备份与恢复

目录 ​编辑 一、数据备份 1.1物理备份 1.1.1冷备份 1.1.2热备份 1.1.3温备份 二、逻辑分区 2.1完全分区 2.2差异分区 2.3增量备份 三、数据备份恢复实验 3.1做一个数据 3.2物理冷备份与恢复 3.3mysqldump 备份与恢复&#xff08;温备份&#xff09; 3.4Mysql数据…

TinyKv流程梳理三

split流程 处理协程启动 func (bs *Raftstore) startWorkers(peers []*peer) {ctx : bs.ctxworkers : bs.workersrouter : bs.routerbs.wg.Add(2) // raftWorker, storeWorkerrw : newRaftWorker(ctx, router)go rw.run(bs.closeCh, bs.wg)sw : newStoreWorker(ctx, bs.store…

GIT常用命令汇总

文章目录 新建仓库git clone克隆一个仓库指定版本到指定文件夹克隆带子模块的仓库 子模块添加子模块删除子模块切换子模块分支更新子模块 GIT IGNORE忽略文件添加忽略某个文件夹下所有文件刷新.gitignore使其生效 参考链接&#xff1a; 新建仓库 git clone 语法如下&#xff…

Centos 7 安装 Oracle 11G

Oracle 11G 安装教程 准备环境 p13390677_112040_Linux-x86-64_1of7.zipp13390677_112040_Linux-x86-64_2of7.zipCentos 7- rhel7-英文版的系统–不想换语言的执行(LANGen_US)– 传输 文件到服务器上 创建用户和组 [rootlocalhost ~]# groupadd oracle [rootlocalhost ~]…

ASUS华硕飞行堡垒8笔记本FX506LH LI LU FX706原装出厂 Win10系统工厂模式20H2

自带所有驱动、出厂主题壁纸LOGO、Office办公软件、MyASUS电脑管家、奥创控制中心等预装程序 所需要工具&#xff1a;16G或以上的U盘 文件格式&#xff1a;HDI,SWP,OFS,EDN,KIT,TLK多个底包 文件大小&#xff1a;10.95GB 注&#xff1a;恢复时会清空电脑上所有盘的数据&…

OpenCV中的RGB与YUV转换

1 基本概念 YUV 颜色空间从模拟电视时代开始就被广泛应用于彩色图像的转换与处理。其基于一个 3x3 的矩阵&#xff0c;通过线性变换将 RGB 像素转换为一个亮度&#xff08;Luma&#xff09;分量 Y 以及两个色度&#xff08;Chroma&#xff09;分量 U 和 V。由于模拟电视存在着多…

曲师大2023大一新生排位赛-B.Sort题解

题目描述 插入排序是一种非常常见且简单的排序算法。王同学是一名大一的新生&#xff0c;今天许师哥刚刚在上课的时候讲了插入排序算法。 假设比较两个元素的时间为 &#xff0c;则插入排序可以以 的时间复杂度完成长度为 n&#xfffd; 的数组的排序。不妨假设这 n 个数字分…

JavaWeb(4)——HTML、CSS、JS 快速入门

一、JavaScript 数组 数组筛选&#xff08;查找&#xff0c;将原来数组中的某些数据去除&#xff09; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content&quo…

【Hydro】一个简单的HBV水文模型产流Python实现

说明 HBV模型包括一系列自由参数&#xff0c;其值可以通过率定得到。同时也包括一些描述流域和气候特征的参数&#xff0c;它们的值在模型率定是假定不变。子流域的划分使得在一个子流域中可能有很多参数值。虽然在大多数应用中&#xff0c;各子流域之间参数值只有很小的变化&a…

webpack插件compression-webpack-plugin

Vue配置compression-webpack-plugin实现Gzip压缩 1、为什么要压缩&#xff1f; 打包的时候开启gzip可以很大程度减少包的大小&#xff0c;页面大小可以变为原来的30%甚至更小&#xff0c;非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户…

使用IDEA社区版创建SpringBoot项目

文章目录 1.关于IDEA社区版的版本2.下载Spring Boot Helper3.创建项目4.配置Maven国内源4.1找不到settings.xml的情况4.2找得到settings.xml的情况 4.3删除repository目录下的所有文件和目录5.加载项目6.解决org.springframework.boot:spring-boot-starter-parent:pom:2.7.13.R…

NXP i.MX 6ULL工业开发板硬件说明书( ARM Cortex-A7,主频792MHz)

前 言 本文档主要介绍TLIMX6U-EVM评估板硬件接口资源以及设计注意事项等内容。 创龙科技TLIMX6U-EVM是一款基于NXP i.MX 6ULL的ARM Cortex-A7高性能低功耗处理器设计的评估板&#xff0c;由核心板和评估底板组成。核心板经过专业的PCB Layout和高低温测试验证&#xff0c;稳…

我们如何在 Elasticsearch 8.6、8.7 和 8.8 中加速数据摄入

作者&#xff1a;Adrien Grand, Joe Gallo, Tyler Perkins 正如你们中的一些人已经注意到的&#xff0c;Elasticsearch 8.6、8.7 和 8.8 在各种数据集上带来了良好的索引加速&#xff0c;从简单的关键字到繁重的 KNN 向量&#xff0c;以及摄取管道繁重的摄取工作负载。 摄取涉及…

Java Mybatis拓展03

0目录 1.MyBatis当实体类和数据库字段名不对应 2.多表查询 1.MyBatis当实体类和数据库字段名不对应 方法2 测试 多表查询 加入子标签association 模糊查询 加入Address 对象 三表联查 2.五表联查 测试

使用 appium 进行微信小程序的自动化测试

目录 前言&#xff1a; 微信小程序结构 自动化用例的调整 示例代码 后记 前言&#xff1a; 微信小程序是一种流行的移动应用程序&#xff0c;它在移动设备上提供了丰富的功能和用户体验。为了确保微信小程序的质量和稳定性&#xff0c;自动化测试是必不可少的一环。Appiu…

el-table找出当前单元格与对应的上下列的值

当前单元格与对应的上下列的值如果不相同就设置个红色边框 当前单元格与对应的上下列的值如果不相同就设置个红色边框 当前单元格与对应的上下列的值如果不相同就设置个红色边框 以下是示例代码&#xff0c;对tableData数据的name字段进行处理 如果当前name值与上一条数据的na…

港联证券-尾盘集合竞价拉升意味着什么意思?

在股票市场中&#xff0c;尾盘集合竞价是指每个交易日的最后几分钟&#xff0c;即下午14:57到3:00之间的交易。在这段时间内&#xff0c;所有股票的买卖都将以竞价的方式进行&#xff0c;最终价格以最高买价与最低卖价的平均值确定&#xff0c;成交量也将作为当日的收盘价和成交…

科普一下Elasticsearch中BM25算法的使用

首先还是先了解几个概念&#xff0c;Elasticsearch是一个开源的分布式搜索和分析引擎&#xff0c;它使用一系列算法来计算文档的相关性分数&#xff08;relevance score&#xff09;。这些算法用于确定查询与文档的匹配程度&#xff0c;以便按相关性对搜索结果进行排序。以下是…

Unity URP 2D光照导入与配置

上面随时间变化的火烧云和晚霞&#xff0c;篝火的呼吸光照&#xff0c;都是URP的功劳。 1.什么是URP&#xff1f; URP 全称为 Universal Render Pipeline(通用渲染管线)。 它的特点是在手游和端游均能在保持性能的同时有良好的效果 也就说在多数情况下&#xff0c;在下面的平台…

10亿级用户,如何做 熔断降级架构?微信和hystrix的架构对比

说在前面 在40岁老架构师 尼恩的读者社区(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如极兔、有赞、希音、百度、网易、滴滴的面试资格&#xff0c;遇到一几个很重要的面试题&#xff1a; (1) 什么是熔断&#xff0c;降级&#xff1f;如何实现&#xff1f; (2) 服务熔…