css实现边框双色凹凸半圆

整体效果如下图:

结构代码:

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

内凹框实现:

css 复制代码
.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 裁出显示区域,内凹圆可任意移动显示位置。

外凸框实现:

css 复制代码
.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画出圆形框(若带有阴影,裁取时坐标需加上阴影扩散宽度)。

注意边框层级。

相关推荐
耶啵奶膘1 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家2 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689972 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽4 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头4 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全5 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing5 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆5 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding6 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机6 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui