响应式页面怎么写_中国建筑平台网_网络推广是什么职业_seo推广是什么意思

整体效果如下图：

结构代码：

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

内凹框实现：

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

外凸框实现：

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

注意边框层级。 

​​​​​​​