css实现边框双色凹凸半圆

整体效果如下图:

结构代码:

 <div class='line-outside-wrap'><div class='wrap'><img src='../img/avatar@2x.png'/><div class='content-wrap'></div></div></div>

内凹框实现:

.content-wrap{width:100%;height:100%;background: #FFF;border:1px solid #BA9664;border-radius:8px;position: relative;overflow:hidden;clip-path: polygon(0px 0, calc(50% - 31.5px) 0, calc(50% - 31.5px) 1px, calc(50% + 31.5px) 1px, calc(50% + 31.5px) 0px,100% 0px, 100% 100%, 0px 100%);&::before{content: '';width: 65px;height: 65px;position: absolute;left: 50%;top: -30px;background: #FFF9EC;transform: translate(-50%, 0%);border: 1px solid #BA9664;border-radius: 50%;}}

核心属性:clip-path 裁出显示区域,内凹圆可任意移动显示位置。

外凸框实现:

.wrap{width:100%;height:100%;padding:5px;background:#FFF9EC;border-radius:12px;position: relative;border: 1px solid #FFF9EC;box-shadow: 0px 1px 10px 4px rgba(255,245,224,0.4);&::before{content: '';width: 65px;height: 65px;position: absolute;left: 50%;top: -25px;transform: translate(-50%, 0%);background: #FFF9EC;border: 1px solid #3A7035;border-radius:50%;clip-path:polygon(-10px 39%,calc(100% + 20px) 39%,100% -10px,-10px -10px);box-shadow: 0px 1px 10px 4px rgba(255,245,224,0.4);z-index:1;}&::after{content: '';position: absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border:1px solid #3A7035;border-radius:12px;clip-path: polygon(0px 0, calc(50% - 31px) 0, calc(50% - 31px) 1px, calc(50% + 31px) 1px, calc(50% + 31px) 0px,100% 0px, 100% 100%, 0px 100%);}}

使用伪元素after画出缺口外框,伪元素before画出圆形框(若带有阴影,裁取时坐标需加上阴影扩散宽度)。

注意边框层级。 

​​​​​​​

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

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

相关文章

字符串统计(Python)

接收键盘任意录入&#xff0c;分别统计大小写字母、数字及其它字符数量&#xff0c;打印输出。 (笔记模板由python脚本于2024年11月02日 08:23:31创建&#xff0c;本篇笔记适合熟悉python字符串并懂得基本编程技法的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xf…

[代码随想录打卡]Day2:209.长度最小的子数组 59.螺旋矩阵II 区间和 开发商购买土地 总结

双指针&#xff1a;快慢指针、对撞指针、滑动窗口。相关博客&#xff1a;双指针算法详解&#xff08;快慢指针、对撞指针、滑动窗口&#xff09; 209.长度最小的子数组 题目&#xff1a;给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于…

Vue3的router和Vuex的学习笔记整理

一、路由的基本搭建 1、安装 npm install vue-router --registryhttps://registry.npmmirror.com 2、配置路由模块 第一步&#xff1a;src/router/index.js创建文件 第二步&#xff1a;在src/view下面创建两个vue文件&#xff0c;一个叫Home.vue和About.vue 第三步&#x…

探索React源码:React Diff

本篇文章我们来了解一下Diff算法的实现过程。 相关概念 React中的各种节点 假设当前存在一个DOM节点&#xff0c;触发了一次更新&#xff0c;那么在协调的过程中&#xff0c;会有四种节点和该节点相关联&#xff1a; 该DOM节点本身。 workInProgress fiber&#xff0c;更新过程…

安装fpm,解决*.deb=> *.rpm

要从生成 .deb 包转换为 .rpm 包&#xff0c;可以按照以下步骤修改打包脚本 1. 使用 fpm 工具 fpm 是一个强大的跨平台打包工具&#xff0c;可以将 .deb 包重新打包成 .rpm&#xff0c;也可以直接从源文件打包成 .rpm。 安装 fpm sudo apt-get install ruby-dev sudo gem in…

【stm32】RTC时钟的介绍与使用

RTC时钟的介绍与使用 一、时间戳1、Unix时间戳2、UTC/GMT3、时间戳转换 二、BKP简介及代码编写1、BKP简介2、BKP基本结构3、BKP库函数介绍&#xff1a;4、程序编写&#xff1a; 三、RTC简介及代码编写1、RTC简介2、RTC框图2、RTC基本结构3、RTC相关库函数介绍&#xff1a;4、程…

深入理解Transformer中的位置编码

1 位置编码的作用 由于注意力的作用机制&#xff0c;不论输入序列的顺序如何&#xff0c;输出结果都是一样的。 也就是丢失了位置信息。 但是对于语言模型&#xff0c; 我们都知道顺序是很重要的&#xff0c; 所以需要对输入序列额外注入位置信息。 2 位置编码方式 Transfor…

使用PostgreSQL进行高效数据管理

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用PostgreSQL进行高效数据管理 PostgreSQL简介 安装PostgreSQL 在Ubuntu上安装PostgreSQL 在CentOS上安装PostgreSQL 在macOS上…

Git - 两种方式撤销已提交到远端仓库的记录并删除提交记录

文章目录 命令行方式附 命令行方式 确定要撤销的提交记录 首先&#xff0c;使用以下命令查看提交历史&#xff1a; git log找到想撤销的提交记录的哈希值&#xff08;SHA&#xff09; &#xff0c;比如9c9c98d6f7f28c41d971f8efd51ed31f9720792c 撤销提交记录 根据需求选择以下…

vscode markdown-image 图片粘贴自动上传到本地目录设置

.vscode/settings.json文件内容 {"markdown-image.base.fileNameFormat": "${hash}-${YY}${MM}${DD}-${HH}${mm}${ss}","markdown-image.local.path": "./images","markdown-image.base.uploadMethod": "Local",…

Linux入门-基础指令和权限

1.压缩打包 1.1压缩是什么 压缩是通过特定的算法&#xff0c;使文件减小体积&#xff0c;从而达到节省空间的目的。 1.2.为什么要压缩 a.压缩将文件大小减小&#xff0c;在本地可能不太明显&#xff0c;但是在网络传输中&#xff0c;减小了网络传输的成本。 b.将多个文件压…

大数据新视界 -- 大数据大厂之 Impala 性能优化:解锁大数据分析的速度密码(上)(1/30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

docker pull 拉取镜像失败,使用Docker离线包

1、登录并注册Github&#xff0c;然后在Github中搜索并打开“wukongdaily/DockerTarBuilder” 项目&#xff0c;在该项目主页点击“Fork”。 然后点 “Create Fork”&#xff0c;将项目创建到自己的Github主页。 2、接着在自己创建过来的这个项目中点击“Actions” 3、然后…

HTTP和HTTPS到底啥区别?不只是差一个“S”这么简单.....

在信息时代&#xff0c;互联网已经成为人们生活中不可或缺的一部分。我们每天浏览网页、发送邮件、进行网络购物&#xff0c;都离不开网络数据的传输。 而保障这些数据在传输过程中的安全&#xff0c;就显得尤为重要。 HTTP和HTTPS作为两种应用层协议&#xff0c;在网络数据传…

微服务设计模式 - 发布订阅模式(Publisher Subscriber Pattern)

微服务设计模式 - 发布订阅模式&#xff08;Publisher Subscriber Pattern&#xff09; 定义 发布-订阅模式&#xff08;Publisher-Subscriber Pattern&#xff09;是一种常见的设计模式&#xff0c;被广泛用于云计算和分布式系统中&#xff0c;以实现松散耦合的组件间通信。发…

0xGame 2024 [Week 4] Jenkins

1.前言 由于好久没做web题了&#xff0c;所以今天来尝试来做一波web题&#xff0c;仅供刷题记录。 2.题目 这个给的提示对于小白来说实在是友好的过劲。 3.分析 上网搜到一个关于Jenkins的历史漏洞&#xff0c;下面链接可供参考 https://blog.csdn.net/2301_80127209/arti…

yolov8训练及测试(ubuntu18.04、tensorrt、ros)

1 数据集制作 1.1标注数据 Linux/Ubuntu/Mac 至少需要 Python 2.6 &#xff08;推荐使用 Python 3 或更高版本 及 PyQt5&#xff09; Ubuntu Linux (Python 3 Qt5) git clone https://gitcode.com/gh_mirrors/la/labelImg.git sudo apt-get install pyqt5-dev-tools cd lab…

Nginx 反向代理(解决跨域)

文章目录 前言一、同源策略二、跨域是什么&#xff1f;三、Nginx解决跨域1.前端示例代码2.说明 四、nginx反向代理配置五、启动nginx六、最终效果总结 前言 Nginx反向代理解决跨域 一、同源策略 定义&#xff1a;同源策略&#xff08;Same-Origin Policy&#xff09;是指浏览…

ssm《数据库系统原理》课程平台的设计与实现+vue

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码看文章最下面 需要定制看文章最下面 目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容…

多渠道流量获取策略提升网站访问量的有效方法

内容概要 在当今数字时代&#xff0c;企业面临着越来越激烈的竞争&#xff0c;流量获取变得极为重要。多渠道流量获取不仅可以增加网站的访问量&#xff0c;还能够有效提升品牌的知名度和影响力。通过整合多种渠道&#xff0c;企业能够更好地触达目标受众&#xff0c;实现精准…