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

注意边框层级。

相关推荐
浪浪山小白兔4 分钟前
HTML5 常用事件详解
前端·html·html5
Python大数据分析@22 分钟前
通俗的讲,网络爬虫到底是什么?
前端·爬虫·网络爬虫
Lysun00143 分钟前
vue2的$el.querySelector在vue3中怎么写
前端·javascript·vue.js
jerry-891 小时前
Centos类型服务器等保测评整/etc/pam.d/system-auth
java·前端·github
小爬菜1 小时前
Django学习笔记(启动项目)-03
前端·笔记·python·学习·django
想要打 Acm 的小周同学呀1 小时前
前端Vue2项目使用md编辑器
前端·编辑器·vue2·markdown 语法
计算机-秋大田2 小时前
基于SSM的家庭记账本小程序设计与实现(LW+源码+讲解)
java·前端·后端·微信小程序·小程序·课程设计
海的预约2 小时前
VUE之路由Props、replace、编程式路由导航、重定向
前端·vue.js·智能路由器
西柚与蓝莓3 小时前
报错:{‘csrf_token‘: [‘The CSRF token is missing.‘]}
前端·flask
python算法(魔法师版)4 小时前
html,css,js的粒子效果
javascript·css·html