HTML&CSS ：生日蛋糕

这段代码通过HTML和CSS实现了一个静态的蛋糕图形，通过伪元素和渐变背景色模拟了蛋糕的细节和装饰。整体效果是一个具有层次感和装饰性的蛋糕。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信我，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        body {
            text-align: center;
            height: 100%;
            margin: 0px;
            background-color: #84CBC6;
        }

        #cheesecake {
            margin: 10px auto;
            position: relative;
            height: 510px;
            width: 510px;
        }

        #cheesecake div {
            position: absolute;
        }

        #cheesecake div::before,
        #cheesecake div::after {
            content: '';
            position: absolute;
            display: block;
        }

        .base {
            width: 170px;
            height: 142px;
            background-image: linear-gradient(#f69a9c 20px, #f7e498 20px, #f7e498 90px, #f8e182 90px, #f8e182 127px, #deac59 127px);
            bottom: 156px;
            left: 170px;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            border: 6px solid #414042;
        }

        .base::before {
            width: 17px;
            height: 42px;
            border-radius: 0 0 17px 17px;
            background-color: #f69a9c;
            box-shadow: 17px -17px #f69a9c, 95px -17px #f69a9c, 126px 0 #f69a9c;
            left: 13px;
            top: 19px;
        }

        .base::after {
            width: 4px;
            height: 4px;
            background-color: #deac59;
            border-radius: 4px;
            box-shadow: 10px -10px #deac59;
            right: 15px;
            bottom: 20px;
        }

        .toppings {
            width: 108px;
            height: 22px;
            border: 6px solid #414042;
            border-radius: 22px;
            background-color: white;
            top: 184px;
            left: 200px;
        }

        .toppings::before {
            width: 71px;
            height: 22px;
            border: 6px solid #414042;
            border-radius: 22px;
            background-color: white;
            top: -22px;
            left: 12px;
            z-index: -1;
        }

        .toppings::after {
            width: 22px;
            height: 22px;
            border: 6px solid #414042;
            border-radius: 22px;
            background-color: #f26d72;
            top: -44px;
            left: 36px;
            z-index: -1;
        }

        .plate {
            width: 264px;
            height: 6px;
            background-color: #414042;
            border-radius: 6px;
            bottom: 156px;
            left: 130px;
        }

        .plate::before {
            width: 235px;
            height: 10px;
            background-color: #cdfffb;
            border: 6px solid #414042;
            border-radius: 0 0 20px 20px;
            left: 8px;
        }

        .plate::after {
            width: 10px;
            height: 10px;
            border-radius: 10px;
            border: 6px solid transparent;
            border-left: 6px solid #414042;
            bottom: 195px;
            left: 128px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
        }

        .glasee {
            width: 40px;
            height: 4px;
            background-color: white;
            border-radius: 4px;
            top: 212px;
            left: 182px;
        }

        .glasee::after {
            width: 13px;
            height: 4px;
            background-color: white;
            border-radius: 4px;
            left: 46px;
        }

        .glasee::before {
            width: 6px;
            height: 6px;
            background-color: white;
            border-radius: 6px;
            top: -55px;
            left: 69px;
        }
    </style>
</head>

<body>
    <div id="cheesecake">
        <div class="toppings"></div>
        <div class="base"></div>
        <div class="plate"></div>
        <div class="glasee"></div>
    </div>
</body>

</html>

HTML 结构

#cheesecake：这是整个蛋糕的容器，用于定位和布局各个部分。
.toppings：表示蛋糕的装饰部分。
.base：表示蛋糕的主体部分。
.plate：表示蛋糕的底座或盘子。
.glasee：可能是用于装饰的玻璃纸或其他装饰物。

CSS 样式

#cheesecake：定义蛋糕整体的容器，尺寸为510px × 510px，居中显示，用于布局内部元素。
#cheesecake div：设置内部所有div元素为绝对定位，便于在容器内自由布局。
.base：蛋糕主体部分，尺寸为170px × 142px，渐变背景模拟多层蛋糕，顶部圆角，带6px深灰色边框。
.base::before：在蛋糕主体上生成多个红色草莓装饰，通过box-shadow实现。
.base::after：在蛋糕主体右侧添加一个高光点，增强立体感。
.toppings：蛋糕顶部的白色装饰层，尺寸为108px × 22px，圆角边框，带6px深灰色边框。
.toppings::before：在装饰层上方生成一个白色延伸部分，增加层次感。
.toppings::after：在装饰层上方生成一个红色圆形装饰（樱桃）。
.plate：蛋糕底部的盘子，尺寸为264px × 6px，深灰色背景，圆角边框。
.plate::before：在盘子上方生成一个白色内衬，带6px深灰色边框，底部圆角。
.plate::after：在盘子左侧生成一个旋转45°的小三角装饰，模拟盘子的立体感。
.glasee：蛋糕上的玻璃纸装饰，尺寸为40px × 4px，白色背景，圆角边框。
.glasee::after：在玻璃纸右侧生成一个白色延伸部分。
.glasee::before：在玻璃纸上方生成一个白色圆形高光点，增加立体感。

---各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！