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

注意边框层级。

相关推荐
Cacciatore->4 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~5 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo7 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末25 分钟前
React——基础
前端·react.js·前端框架
每天开心30 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry37 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9344 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子44 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js
程序无bug1 小时前
Spring 面向切面编程AOP 详细讲解
java·前端