div+css布局实现边框凹凸效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现边框凹凸效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .box { --r: 20px; /* control the rounded part*/ --s: 40px; /* control the size of the cut */ --a: 40deg; /* control the depth of the curvature*/ height: 120px; margin-block: 20px; background: linear-gradient(45deg,#FF4E50,#40C0CB); --_m:0/calc(2*var(--r)) var(--r) no-repeat radial-gradient(50% 100% at bottom,#000 calc(100% - 1px),#0000); --_d:(var(--s) + var(--r))*cos(var(--a)); mask: calc(50% + var(--_d)) var(--_m),calc(50% - var(--_d)) var(--_m), radial-gradient(var(--s) at 50% calc(-1*sin(var(--a))*var(--s)), #0000 100%,#000 calc(100% + 1px)) 0 calc(var(--r)*(1 - sin(var(--a)))) no-repeat, linear-gradient(90deg,#000 calc(50% - var(--_d)),#0000 0 calc(.........完整代码请登录后点击上方下载按钮下载查看
网友评论0