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)
    .........完整代码请登录后点击上方下载按钮下载查看