div+css布局实现带状态指示的用户图像代码-html代码-BFW代码库

div+css布局实现带状态指示的用户图像代码

代码语言：html

代码描述：div+css布局实现带状态指示的用户图像代码

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

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

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

  
  
  
  
<style>
@property --s {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

img {
  --w: 170px; /* the image size */
  --s: 12px;  /* control the indicator size */
  --g: 3px;   /* control the gap (+ a default gap) */
  
  width: var(--w);
  aspect-ratio: 1;
  padding: 0 calc(var(--w)/sqrt(2)) calc(var(--w)/sqrt(2)) 0;
  margin: 0 calc(-1*var(--w)/sqrt(2)) calc(-1*var(--w)/sqrt(2)) 0;
  outline: var(--s) solid #B90504;
  outline-offset: -9e9q;
  mask: 
    radial-gradient(#000 calc(var(--s) - 1px),#0000 var(--s)),
    radial-gradient(#000 70%,#0000 71%) 0 0/var(--w) var(--w) subtract,
    radial-gradient(
      #000  calc(sqrt(2)*var(--s) + var(--g)),
      #0000 calc(sqrt(2)*var(--s) + var(--g) + 1px));
  /* clip-path is only needed to reduce the mouse interaction area */
  clip-path: circle.........完整代码请登录后点击上方下载按钮下载查看