HTML 齿轮形状代码示例 - 如何用 CSS 创建齿轮 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>Gear Shape</title>
    <style>
        .gear {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 10px solid gray;
            background-color: white;
            position: relative;
        }
<pre><code>    .gear:before {
        content: &quot;&quot;;
        position: absolute;
        width: 60px;
        height: 60px;
        background-color: gray;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }

    .gear:after {
        content: &quot;&quot;;
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: white;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <div class='gear'></div>
</body>
</html>