当前位置: 首页 > article >正文

CSS实现两组item中间边框不重复,且边框为渐变色

 效果如图

.three-net-item {
          position: relative;
}

.three-net-item:first-of-type::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background: linear-gradient(to right, transparent, #1c65c6, transparent);
        }

        .three-net-item:first-of-type::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background: linear-gradient(to right, transparent, #1c65c6, transparent);
        }

        .three-net-item:last-of-type::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background: linear-gradient(to right, transparent, #1c65c6, transparent);
        }

 


http://www.kler.cn/a/410907.html

相关文章:

  • 探索 GAN 的演变之路
  • 【PX4_Autopolite飞控源码】中飞控板初始化过程中的引脚IO控制(拉低/拉高)
  • C 语言学习-06【指针】
  • 在vue中,根据后端接口返回的文件流实现word文件弹窗预览
  • ApiChain 从迭代到项目 接口调试到文档生成单元测试一体化工具
  • Centos-stream 9,10 add repo
  • VXLAN详解
  • 【系统架构设计师】真题论文: 论软件架构建模技术与应用(包括解题思路和素材)
  • LLM | 论文精读 | CVPR | FairCLIP:追求视觉语言学习中的公平性
  • 初始ArkUI
  • lua除法bug
  • Ubuntu下手动设置Nvidia显卡风扇转速
  • shell与QQ邮箱的连接
  • etcd快速入门
  • 业务架构、数据架构、应用架构和技术架构
  • Ubuntu 关闭内核自动更新
  • 因泰立科技:激光技术融合,高速公路治超系统的创新实践
  • C++【日志模块中的writer类】前文中 循环队列用法
  • 2024算法基础公选课练习四(综合2)
  • Java-06 深入浅出 MyBatis - 一对一模型 SqlMapConfig 与 Mapper 详细讲解测试
  • windows下安装wsl的ubuntu,同时配置深度学习环境
  • 小米note pro一代(leo)线刷、twrp、magisk、TODO: android源码编译
  • 解决单元测试时找不到类名
  • 梧桐数据库的高效索引技术研究及实现
  • 如何修复WordPress .htaccess文件
  • c++中set容器的遍历和读取某一位置的值