css实现边框双色凹凸半圆

整体效果如下图:

结构代码:

html 复制代码
 <div class='line-outside-wrap'>
     <div class='wrap'>
        <img src='../img/[email protected]'/>
        <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画出圆形框(若带有阴影,裁取时坐标需加上阴影扩散宽度)。

注意边框层级。

相关推荐
拉不动的猪5 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程15 分钟前
如何测试短信接口
java·服务器·前端
安冬的码畜日常38 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
小杨升级打怪中43 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木1 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师1 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚1 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧1 小时前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js