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

注意边框层级。

相关推荐
啷咯哩咯啷3 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户26124583401614 分钟前
vue学习路线(10.监视属性-watch)
前端·vue.js
Spider_Man5 分钟前
React-Router 全面解析与实战指南
前端·react.js
凌览6 分钟前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
爱学习的小学渣7 分钟前
Css: flex布局+趣味Demo
css
丘耳7 分钟前
前端渲染方式
前端
The_cute_cat7 分钟前
Ajax和Axios的初步学习
前端·学习·ajax
Zz_waiting.9 分钟前
Javaweb - 10.4 ServletConfig 和 ServletContext
java·开发语言·前端·servlet·servletconfig·servletcontext·域对象
爱学习的小学渣9 分钟前
JS用法:Map,Set和异步函数
前端·javascript
Mike_jia16 分钟前
Icinga 2:开源监控领域的全能选手——从零构建企业级智能运维体系
前端