div+css布局实现无限图片条纹阴影效果代码-html代码-BFW代码库

div+css布局实现无限图片条纹阴影效果代码

代码语言：html

代码描述：div+css布局实现无限图片条纹阴影效果代码

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

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

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


  
  
<style>
img {
  --b: 8px; /* the border thickness*/
  --w: 216px; /* image width */
  --c: #A7DBD8;
  
  
  --_w: calc(0.1464*var(--w));
  width: var(--w);
  aspect-ratio: 1;
  border-radius: 50%; /* don't touch this, only rounded images */
  padding: var(--b);
  box-shadow: 0 0 0 var(--b) inset var(--c);
  box-sizing: border-box;
}
.top-left {
  border-image:
    repeating-radial-gradient( 
      at calc(100% - var(--w)/2 + var(--_w)) calc(100% - var(--w)/2 + var(--_w)),
      var(--c) 0,#0000 1px var(--b),var(--c) calc(var(--b) + 1px) calc(var(--b)*2)
    ) 9999 0 0 9999/
    calc(100% - var(--_w)) var(--_w) var(--_w) calc(100% - var(--_w))/
    999px 0 0 999px;
  clip-path: 
    polygon(
      120.71% 50%,calc(120.71% - 999px) calc(50% - 999px),
      calc(50% - 999px) calc(120.71% - 999px),50% 120.71%);
}
.bottom-right {
  border-image:
    repeating-radial-gradient( 
      at calc(var(--w)/2 - var(--_w)) calc(var(--w)/2 - var(--_w)),
      var(--c) 0,#0000 1px var(--b),var(--c) calc(var(--b) + 1px) calc(var(--b)*2)
    ) 0 9999 9999 0/
    var(--_w) calc(100% - var(--_w)) calc(100% - var(--_w)) var(--_w)/
    0 999px 999px 0;
  clip-path: 
    polygon(50% -20.71%,calc(50% + 999px) calc(999px - 20.71%),
    calc(999px - 20.71%) calc(50% + 999px),-20.71% 50%);
}
.top-right {
  border-image:
    repeating-radial-gradient( 
      at calc(var(--w)/2 - var(--_w)) calc(100% - var(--w)/2 + var(--_w)),
      var(--c) 0,#0000 1px var(--b),var(--c) calc(var(--b) + 1px) calc(var(--b)*2)
    ) 9999 9999 0 0/
    calc(100% - var(--_w)) calc(100% - var(--_w)) var(--_w) var(--_w)/
    999px 999px 0 0;
  clip-path: 
  .........完整代码请登录后点击上方下载按钮下载查看