css 实现四角边框样式

效果
效果如图
此图只实现 左下与右下边角样式
右上与左上同理

/*  容器 */
.card-mini {position: relative;
}
/*  左下*/
.card-mini::before {content: '';position: absolute;left: 0;bottom: 0;width: 20px;height: 20px;border-bottom: 2px solid #253d64;border-left: 2px solid #253d64;border-bottom-left-radius: 10px;
}
/*  右下*/
.card-mini::after {content: '';position: absolute;right: 0;bottom: 0;width: 20px;height: 20px;border-bottom: 2px solid #253d64;border-right: 2px solid #253d64;border-bottom-right-radius: 10px;
}

右上与左上 将上面的bottom改为top

.card-mini::before {content: '';position: absolute;left: 0;top: 0;width: 20px;height: 20px;border-top: 2px solid #253d64;border-left: 2px solid #253d64;border-top-left-radius: 10px;
}
.card-mini::after {content: '';position: absolute;right: 0;top: 0;width: 20px;height: 20px;border-top: 2px solid #253d64;border-right: 2px solid #253d64;border-top-right-radius: 10px;
}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Promise.all和promise.race的应用场景举例

Promise.all( ).then( )适用于处理多个异步任务&#xff0c;且所有的异步任务都得到结果时的情况。 <template><div class"box"><el-button type"primary" plain click"clickFn">点开弹出框</el-button></div> &…

IDEA创建Servlet(Web)项目完整教程-2023,并配置tomcat的端口号,以及默认打开的浏览器

文章目录 1. 文章引言2. 创建servlet项目3. 总结1. 文章引言 今天,粉丝问我一个问题,如下图所示: 他是jsp + servlet项目,但启动后,无论如何都无法访问,于是向我咨询如何解决该问题。 我解决了一系列的问题后,也无法启动他的项目,于是自己创建一个简单的servlet项目。…

java 实现N次多项式回归

使用的类库 org.apache.commons.math3 maven <dependency><groupId>org.apache.commons</groupId><artifactId>commons-math3</artifactId><version>3.6.1</version> </dependency> 推荐工具 如果只是做学术研究用&…

LeetCode面试经典150题(day 1)

LeetCode是一个免费刷题的一个网站&#xff0c;想要通过笔试的小伙伴可以每天坚持刷两道算法题。 接下来&#xff0c;每天我将更新LeetCode面试经典150题的其中两道算法题&#xff0c;一边巩固自己&#xff0c;一遍希望能帮助到有需要的小伙伴。 88.合并两个有序数组 给你两个…

Excel/PowerPoint折线图从Y轴开始(两侧不留空隙)

默认Excel/PowerPoint折线图是这个样子的&#xff1a; 左右两侧都留了大块空白&#xff0c;很难看 解决方案 点击横坐标&#xff0c;双击&#xff0c;然后按下图顺序点击 效果

【实训项目】易行APP设计(c2c二手交易平台)

1.设计摘要 1.1市场背景 随着经济的迅速发展与科技日新月异的进步&#xff0c;家庭内的各项物品更新换代频率越来越快&#xff0c;人们购买新商品后越来越多旧的商品积压需要处理&#xff1b;在互联网电商的各种营销刺激下&#xff0c;消费者非常容易形成“冲动”消费&#x…

C语言基础之——操作符(上)

本篇文章&#xff0c;我们将展开讲解C语言中的各种常用操作符&#xff0c;帮助大家更容易的解决一些运算类问题。 这里提醒一下小伙伴们&#xff0c;本章知识会大量涉及到二进制序列&#xff0c;不清楚二进制序列的小伙伴&#xff0c;可以去阅读我的另一篇文章《数据在内存中的…

Spring Boot 整合 分布式搜索引擎 Elastic Search 实现 搜索、分页与结果过滤

文章目录 ⛄引言一、酒店搜索和分页⛅需求分析⚡源码编写 二、酒店结果过滤⌚需求分析⏰修改搜索业务 ✅效果图⛵小结 ⛄引言 本文参考黑马 分布式Elastic search Elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据…

Java进阶(7)——手动实现LinkedList 内部node类的实现 增删改查的实现 toString方法 源码的初步理解

目录 引出从ArrayList到Linkedlist手动实现ArrayList从ArrayList到LinkedList 总体设计Node类Node的方法&#xff1a;根据index找node 增删改查的实现增加元素删除元素修改元素查询元素 toString方法完整代码List接口类LinkedList的实现测试类 总结 引出 1.linkedList的节点&am…

实战项目ssm权限系统 3-总结篇,权限模块保护业务模块

一 工程模块介绍 1.1 工程模块关系 在业务微服务模块中引入安全认证模块&#xff0c;起到对业务模块的认证授权保护

爬虫:绕过5秒盾Cloudflare和DDoS-GUARD

本文章仅供技术研究参考&#xff0c;勿做它用&#xff01; 5秒盾的特点 <title>Just a moment...</title> 返回的页面中不是目标数据&#xff0c;而是包含上面的代码&#xff1a;Just a moment... 或者第一次打开网页的时候&#xff1a; 这几个特征就是被Cloud…

汽车电子笔记之:AUTOSAR方法论及基础概念

目录 1、AUTOSAR方法论 2、AUTOSAR的BSW 2.1、MCAL 2.2、ECU抽象层 2.3、服务层 2.4、复杂驱动 3、AUTOSAR的RTE 4、AUTOSAR的应用层 4.1、SWC 4.2、AUTOSAR的通信 4.3、AUTOSAR软件接口 1、AUTOSAR方法论 AUTOSAR为汽车电子软件系统开发过程定义了一套通用的技术方法…