css制作蛋糕 |css揭秘作者

//创建圆形
.circle {
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #f4a7b9;
}
//创建蛋糕的顶部
.top {
height: 150px;
width: 150px;
background-color: #f7dc6f;
border-radius: 75px;
margin: 25px auto 0;
}
//拓宽蛋糕顶部
.top:before {
content: "";
display: block;
width: 30px;
height: 150px;
background-color: #f7dc6f;
position: absolute;
top: -25px;
left: -15px;
border-top-left-radius: 75px;
border-top-right-radius: 75px;
transform: rotate(-45deg);
}
//创建蛋糕的中间层
.middle {
width: 150px;
height: 150px;
background-color: #f7dc6f;
border-radius: 75px;
margin: 30px auto;
}
//拓宽蛋糕的中间层
.middle:before {
content: "";
display: block;
width: 30px;
height: 150px;
background-color: #f7dc6f;
position: absolute;
top: -10px;
left: -15px;
border-top-left-radius: 75px;
border-top-right-radius: 75px;
transform: rotate(-40deg);
}
//创建蛋糕的底部
.bottom {
height: 100px;
width: 200px;
background-color: #f7dc6f;
margin: 30px auto;
}
//制作蛋糕的花边
.decor {
height: 50px;
width: 200px;
position: relative;
margin: 0 auto;
}
.decor:before, .decor:after {
content: "";
display: block;
position: absolute;
bottom: 50%;
background-color: #f4a7b9;
}
//左侧花边
.decor:before {
left: -5px;
width: 30px;
height: 30px;
border-top-right-radius: 30px;
box-shadow: 5px -5px 0 -5px #f7dc6f;
}
//右侧花边
.decor:after {
right: -5px;
width: 30px;
height: 30px;
border-top-left-radius: 30px;
box-shadow: -5px -5px 0 -5px #f7dc6f;
}

看到这里，大家就完成了一个可爱的蛋糕模型的制作。希望这篇文章能帮助你更好地学习CSS。