html - 使用 css、jquery 创建轮廓

Question

我想准确地创建图像中的轮廓。我试过了，但我做不到。是否可以像提供的图像一样执行此操作。在我的尝试中，我使用了很多 html 子标签来实现这一点，但我希望尽量减少它。有什么方法可以简单地做到这一点。

*{margin: 0; padding: 0; box-sizing: border-box;}
        .parent, .child {
            display: flex;
            border: 1px solid gray;
        }
        .parent {
            width: 50%;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }
        .child {
            padding: 15px;
            border-radius: 50px;
        }
        .one {width: 20vw; height: 15vh;}

<div class="parent">
        <div class="child">
            <div class="child">
                <div class="child">
                    <div class="child">
                        <div class="child">
                            <div class="child">
                                <div class="child">
                                    <div class="child">
                                        <div class="child">
                                            <div class="child">
                                                <div class="child one">img</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

你看起来像这样吗。使用 box-shadow而不是多个 div和多个css类。

img {
  margin:60px;
  background-color:#eee;
  width: 20vw; height: 15vh;
  border-radius: 50px;
  box-shadow:
    0 0 0 2px #aaa,
    0 0 0 10px #eee,
    0 0 0 12px #aaa,
    0 0 0 20px #eee,
    0 0 0 22px #aaa,
    0 0 0 30px #eee,
    0 0 0 32px #aaa,
    0 0 0 40px #eee,
    0 0 0 42px #aaa,
    0 0 0 50px #eee,
    0 0 0 52px #aaa,
    0 0 0 60px #eee;
}

<img src="" alt="Image">