css 实现四角边框样式

news2025/1/14 18:44:44

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

/*  容器 */
.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.coloradmin.cn/o/915052.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

赴日程序员学日语需要学多久?

现在很多国内程序员想转型做赴日IT,但是因为完全没有日语经验,又长期从事解决问题debug的工作,所以非常担心自己学不会日语。其实你的心底里可能比较担心是,投入了很多时间发现学不会文科类型的语言,自己没有学母语以外…

[保研/考研机试] KY124 二叉搜索树 浙江大学复试上机题 C++实现

题目链接&#xff1a; 二叉搜索树_牛客题霸_牛客网判断两序列是否为同一二叉搜索树序列。题目来自【牛客题霸】https://www.nowcoder.com/share/jump/437195121692722892652 描述 判断两序列是否为同一二叉搜索树序列 输入描述&#xff1a; 开始一个数n&#xff0c;(1<…

Python数据采集实战-使用BeautifulSoup框架解析HTML文档并提取所需内容(附源码和实现效果)

实现功能 使用BeautifulSoup框架解析HTML文档并提取所需内容的例子&#xff1a;假设我们要从以下HTML文档中提取所有超链接的链接地址 实现代码 from bs4 import BeautifulSoup import requests# 发送请求并获取HTML文档 url "https://www.baidu.com" response r…

c(Bua-Cpa-Thi-Val-Asn-Cys)-Pro-d-Arg-NEt2 acetate,1647120-04-4,试剂特点介绍

英文名&#xff1a;c(Bua-Cpa-Thi-Val-Asn-Cys)-Pro-d-Arg-NEt2 acetate CAS&#xff1a;1647120-04-4 1.Molecular formula&#xff1a;C44H64ClN11O10S2 2.Molecular weight&#xff1a;1006.63 3.Packaging specification&#xff1a;1g、5g、10g, flexible packaging, inc…

宠物小程序开发

在当今社会&#xff0c;宠物已成为许多人生活中不可或缺的一部分。宠物市场的持续增长为创业者提供了巨大的商机。然而&#xff0c;作为一个创业者&#xff0c;要在竞争激烈的宠物市场中脱颖而出并不容易。因此&#xff0c;开发一个专属于自己的宠物小程序成为了解决这一难题的…

Linux下的Shell编程——Shell概述和入门(一)

前言&#xff1a; Shell还是一个功能相当强大的编程语言&#xff0c;易编写、易调试、灵活性强。为了方便后续的学习&#xff0c;我们需要学习在Linux系统下的Shell编程 目录 一、Shell概述 1.Linux 提供的 Shell 解析器有 2. 默认的解析器是 bash 二、Shell 脚本入门 1.脚…

php+echarts实现数据可视化实例3

效果 全部代码 <?php include(includes/session.inc); include(includes/SQL_CommonFunctions.inc); ?> <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" …

OpenGL —— 2.2、Shader之间数据传输、向Shder传输数据

Shader OpenGL着色器&#xff08;shader&#xff09;是一种用于编写图形渲染代码的编程语言。它们在图形处理单元&#xff08;GPU&#xff09;上运行&#xff0c;用于控制渲染管线的不同阶段。 在OpenGL中&#xff0c;有两种主要类型的着色器&#xff1a;顶点着色器和片段着色器…

Linux 压缩解压(归档管理):tar命令

计算机中的数据经常需要备份&#xff0c;tar是Unix/Linux中最常用的备份工具&#xff0c;此命令可以把一系列文件归档到一个大文件中&#xff0c;也可以把档案文件解开以恢复数据。 tar使用格式 tar [参数] 打包文件名 文件 tar命令很特殊&#xff0c;其参数前面可以使用“-”&…

windows端口被占用——使用taskkill干掉不听话的进程

8080端口被占用为例 1. win R 输入 cmd 回车 进入命令行界面 2. 查看端口占用情况 netstat -aon|findstr 8080 查到8080被24308 进程占用 3. 杀手父进程 使用taskkill 干掉不听话的进程 taskkill /f /t /pid 24308 C:\Users\84869>taskkill /?TASKKILL [/S system…

用户端Web自动化测试-L2

目录&#xff1a; 高级定位-css高级定位-xpath显式等待高级使用高级控件交互方法网页 frame 与多窗口处理文件上传&#xff0c;弹框处理自动化关键数据记录电子商务产品实战 1.高级定位-css css 选择器概念 css 选择器有自己的语法规则和表达式css 定位通常分为绝对定位和相…

k8s-dashboard使用指导手册

一、访问 dashboard http://172.66.209.101:32001 二、选择 Namespace 如下图&#xff1a; 1 在①搜索框中输入 spms 2 在②选择 spms-cloud 三、查找 pod 1 打开 pod 列表 2 打开过滤窗口 3 搜索 pod 在打开的搜索框中输入 pod的关键字&#xff0c;支持模糊搜索 如搜索…

春秋云镜 CVE-2019-16692

春秋云镜 CVE-2019-16692 phpIPAM 1.4 - SQL Injection 靶标介绍 phpIPAM 1.4后台存在SQL Injection。 启动场景 漏洞利用 后台SQL注入&#xff0c;admin/admin888登陆成功。 exp POST /app/admin/routing/edit-bgp-mapping-search.php HTTP/1.1 Host: xxx.com Content-Le…

如何实现24/7客户服务自动化?建设智能客服知识库

客户自助服务是指用户通过企业或者第三方建立的网络平台或者终端&#xff0c;实现相关的自定义处理。实现客户服务自动化&#xff0c;对提高客户满意度、维持客户关系至关重要。客户服务自动化可以帮助企业以更快的速度和更高的效率来满足客户的售后服务要求&#xff0c;以进一…

ES搭建集群

一、创建 elasticsearch-cluster 文件夹 创建 elasticsearch-7.8.0-cluster 文件夹&#xff0c;在内部复制三个 elasticsearch 服务。 然后每个文件目录中每个节点的 config/elasticsearch.yml 配置文件 node-1001 节点 #节点 1 的配置信息&#xff1a; #集群名称&#xff0…

【NumPy系列】基本操作 - 一

知识目录 前言一、NumPy介绍1.1 导入NumPy库1.2 查看NumPy版本1.3 读取图片返回NumPy数组 二、创建NumPy数组的十二种方式2.1 array 和 full2.2 zeros 和 ones2.3 随机数数组2.4 服从正态分布的数组2.5 arrange 和 eye、linspace 三、ndarray属性四、ndarray基本操作4.1 索引4.…

渗透测试方法论

文章目录 渗透测试方法论1. 渗透测试种类黑盒测试白盒测试脆弱性评估 2. 安全测试方法论2.1 OWASP TOP 102.3 CWE2.4 CVE 3. 渗透测试流程3.1 通用渗透测试框架3.1.1 范围界定3.1.2 信息搜集3.1.3 目标识别3.1.4 服务枚举3.1.5 漏洞映射3.1.6 社会工程学3.1.7 漏洞利用3.1.8 权…

TCP可靠性机制

确认号/序列号/ACK TCP帮助确保数据的准确传递。为了做到这一点&#xff0c;其使用了一些特殊的标记和信息&#xff0c;其中包括序号、确认号和ACK字段。 其中&#xff0c;它将每个字节的数据都进行了编号. 即为序列号. 序列号&#xff1a;就像给书中的每一页都编了号码一样&a…

【核磁共振成像】傅里叶重建

目录 一、傅里叶重建二、填零三、移相四、数据窗函数五、矩形视野六、多线圈数据重建七、图像变形校正八、缩放比例九、基线校准 长TR&#xff0c;长TE&#xff0c;是T2加权像&#xff1b; 短TR&#xff0c;短TE&#xff0c;是T1加权像&#xff1b; 长TR&#xff0c;短TE&#…

关于vlan的三层架构实验

实验要求及拓扑 一、思路 1. 先配置接入层的接口类型及划分 2.配置汇聚层的接口类型及划分 3.配置汇聚层的IP地址及编写缺省、NAT--IP地址转换 4. 给vlan分组&#xff0c;定义组 的主根&#xff0c;组的备份根 5.汇聚层之间使用通道技术(华为&#xff1a;以太网中继Eth-Tru…