CSS基础 | 利用CSS画口锅

---

1. 前言

本项目代码来自《CSS3艺术：网页设计案例实战》

效果图：

该蒸锅大体上分为锅身和锅盖两个部分，通过观察可以得知：

1. 其锅身上有把手
2. 锅盖上有提钮
3. 锅身和锅盖上都有白色的光影

利用伪元素相关知识，可以将DOM结构设计如下代码所示，锅身和锅盖分别是两个元素，然后与锅身相关的把手、光影，以及与锅盖相关的提钮、光影，分别用它们的伪元素实现。

<figure>
			<div class="steamer">
				<div class="lid"></div>
				<div class="pot"></div>
			</div>
</figure>

2. CSS代码

		body{
				margin: 0;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: pink;
			}
			.steamer{
				font-size: 10px;
				width: 30em;
				height: 30em;
				background-color: white;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				z-index: 1;
			}
			.pot{
				width: 16em;
				height: 12em;
				background-color: darkslateblue;
				border-radius: 0.5em 0.5em 6.5em 6.5em;
				border-right: 1.5em solid midnightblue;
				position: relative;				
			}
			.pot::before{
				content: "";
				position: absolute;
				width: 22em;
				height: 2.5em;
				background-color: tomato;
				border-radius: 1.25em;
				left: calc((16em + 1.5em - 22em)/2);
				top: 1em;
				z-index: -1;
			}	
			.lid{
				width:17em;
				height: 6em;
				background-color: gold;
				border-radius: 6em 6em 0 0 ;
				border-right:1.5em solid goldenrod;
				border-bottom: 1.2em solid goldenrod;
				position: relative;
				top: 0.5em;
				z-index: 1;
			}
			.lid::before{
				content: "";
				position: absolute;
				width: 4em;
				height: 4em;
				background-color: tomato;
				border-radius: 50%;
				top: -2.5em;
				left: 7em;
				}
			.lid::after{
				content: "";
				position:absolute;
				width: 7em;
				height: 7em;
				border: 0.6em solid;
				border-color: transparent transparent transparent white;
				border-radius: 50%;
				top: 0.6em;
				left: 2.5em;
				transform: rotate(45deg);
			}
			.pot::after{
				content: "";
				position: absolute;
				width: 8em;
				height: 8em;
				border: 0.6em solid;
				border-color:  transparent  transparent  white transparent  ; 
				border-radius: 50%;
				top: 1em;
				left: 2em;
				transform: rotate(45deg);
			}

3. 知识点扫盲

3.1 视口单位

什么叫视口单位？视口单位，即在浏览器中看到的部分页面。

1. 将vw代表视口宽度的单位
2. 将vh代表视口高度的单位

使用这些单位，可以把一些东西随用户的视口改变而改变。

3.2 align-items

align-items 属性定义flex子项在flex容器的 当前行的侧轴（纵轴） 方向上的对齐方式。

常用属性有：

• stretch：默认值，元素被拉伸适应容器
• center：容器的中心
• flex-start：容器的开头
• flex-end：容器的结尾

3.3 justify-content

justify-content 属性定义flex子项在flex容器主轴（横轴）方向上的对齐方式。

常用属性有：

• flex-start: 容器的开头
• flex-end: 容器的结尾
• center: 容器的中心
• space-between: 项目位于各行之间留有空白的容器内。
• space-around: 项目位于各行之前、之间、之后都留有空白的容器内。

3.4 flex-direction

flex-direction 属性规定灵活项目的方向。

常用属性有：

• row：行显示
• row-reverse： 翻转行显示
• column： 列显示
• column-reverse： 翻转列显示

3.5 border-color

border-color 设置四个边框颜色：上 右 下 左、上 左右 下、上下 左右、上下左右。

注意
border-style 属性声明到 border-color 属性之前。元素必须在改变其颜色之前获得边框。