div+css mask实现图片边角镂空效果代码-html代码-BFW代码库

div+css mask实现图片边角镂空效果代码

代码语言：html

代码描述：div+css mask实现图片边角镂空效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
img {
  --r: 25px; /* the radius */
  --s: 40px; /* the size of the corner*/
  
  width: 200px;
  border-radius: var(--r);
  
  --_m:/calc(2*var(--r)) calc(2*var(--r))
    radial-gradient(#000 70%,#0000 72%) no-repeat;
}
.top-right {
  mask:
    right calc(var(--s) + var(--r)) top var(--_m),
    right calc(var(--s) + var(--r)) var(--_m),
    radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%) 
     calc(-1*var(--r)) var(--r) no-repeat,
    conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)),
     #0000 25%,#000 0);
}
.top-left {
  mask:
    calc(var(--s) + var(--r)) 0 var(--_m),
    0 calc(var(--s) + var(--r)) var(--_m),
    radial-gradient(var(--s) at 0 0,#0000 99%,#000 101%) 
     var(--r) var(--r) no-repeat,
    conic-gradient(at calc(var(--s) + 2*var(--r)) calc(var(--s) + 2*var(--r)),
     #000 75%,#0000 0);
}
.bottom-left {
  mask:
    calc(var(--s) + var(--r)) bottom var(--_m),
    bottom calc(var(--s) + var(--r)) left var(--_m),
    radial-gradient(var(--s) at 0 100%,#0000 99%,#000 101%) 
     var(--r) calc(-1*va.........完整代码请登录后点击上方下载按钮下载查看