“我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！”

前言

同css代码来还原这台打印机

首先在body中设置一下外层样式，外层页面才有flex布局打印机整体居中

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #ffe5cc
}

创建打印机整体元素

<div class="shell">
</div>

.shell {
  position: relative;
  top: -35px;
}

创建打印机右上角的按钮，边框颜色为黑色，背景颜色为#fd6e49，高宽均为15px，圆角50度

<div class="shell">
    <label class="button" for="button"></label>
 </div>

.shell {
  position: relative;
  top: -35px;
}

.button {
    position: absolute;
    z-index: 30;
    border-radius: 50%;
    border: 5px solid black;
    background-color: #fd6e49;
    width: 15px;
    height: 15px;
    left: 90px;
    cursor: pointer;
    top: 45px;
  }

、

创建打印机头部的机器盖子，背景为黑色，上半部分有20px的圆角弧度，设置边框5px 黑色，高度70px，宽度160px

需要设置阴影从外层的阴影开始时改变阴影内侧阴影

<div class="shell">
    <label class="button" for="button"></label>
    <div class='top'></div>
 </div>

.shell {
  position: relative;
  top: -35px;
}

.button {
    position: absolute;
    z-index: 30;
    border-radius: 50%;
    border: 5px solid black;
    background-color: #fd6e49;
    width: 15px;
    height: 15px;
    left: 90px;
    cursor: pointer;
    top: 45px;
  }
 .top {
    position: absolute;
    background-color: #282c30;
    width: 160px;
    height: 70px;
    border-radius: 20px 20px 0 0;
    border: 5px solid black;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    box-shadow: inset 20px 0 #1e2124;
    z-index: -1;
}

创建打印机中间主体部分

背景颜色为#4a4f55，高度100px 宽度250px 设置边框5px 黑色，

设置阴影部分与打印机头类似从外层的阴影开始时改变阴影内侧阴影，阴影颜色为#373b3d

<div class="shell">
    <label class="button" for="button"></label>
    <div class='top'></div>
     <div class='middle'></div>
 </div>

.shell {
  position: relative;
  top: -35px;
}

.button {
    position: absolute;
    z-index: 30;
    border-radius: 50%;
    border: 5px solid black;
    background-color: #fd6e49;
    width: 15px;
    height: 15px;
    left: 90px;
    cursor: pointer;
    top: 45px;
  }
 .top {
    position: absolute;
    background-color: #282c30;
    width: 160px;
    height: 70px;
    border-radius: 20px 20px 0 0;
    border: 5px solid black;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    box-shadow: inset 20px 0 #1e2124;
    z-index: -1;
}
.middle {
    position: absolute;
    background-color: #4a4f55;
    border: 5px solid black;
    width: 250px;
    height: 100px;
    border-radius: 20px;
    top: 30px;
    left: -130px;
    box-shadow: inset 20px 0 #373b3d;
    z-index: 5;
}

创建打印机底部

背景颜色为#282c30，高度80px 宽度160px 设置边框5px 黑色，

设置阴影部分与打印机头类似从外层的阴影开始时改变阴影内侧阴影，阴影颜色为#373b3d

<div class="shell">
    <label class="button" for="button"></label>
    <div class='top'></div>
     <div class='middle'></div>
     <div class="trace"></div>
 </div>

.shell {
  position: relative;
  top: -35px;
}

.button {
    position: absolute;
    z-index: 30;
    border-radius: 50%;
    border: 5px solid black;
    background-color: #fd6e49;
    width: 15px;
    height: 15px;
    left: 90px;
    cursor: pointer;
    top: 45px;
  }
 .top {
    position: absolute;
    background-color: #282c30;
    width: 160px;
    height: 70px;
    border-radius: 20px 20px 0 0;
    border: 5px solid black;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    box-shadow: inset 20px 0 #1e2124;
    z-index: -1;
}
.middle {
    position: absolute;
    background-color: #4a4f55;
    border: 5px solid black;
    width: 250px;
    height: 100px;
    border-radius: 20px;
    top: 30px;
    left: -130px;
    box-shadow: inset 20px 0 #373b3d;
    z-index: 5;
}
.trace {
    border: 5px solid black;
    width: 160px;
    height: 80px;
    border-radius: 10px;
    left: -85px;
    top: 110px;
    box-shadow: inset 0 35px #1e2124;
    z-index: 2;
}
.trace, .trace:before {
    position: absolute;
    background-color: #282c30;
}

然后是创建打印机底部突出的部分

使用伪类高度20px 宽度60px 设置底部圆角10px

.trace:before {
    content: "";
    width: 60px;
    height: 20px;
    border-radius: 0 0 10px 10px;
    top: 80px;
    left: 45px;
    border-bottom: 5px solid black;
    border-right: 5px solid black;
    border-left: 5px solid black;
}

创建打印机底部中的条

高度50px 宽度5px 背景黑色也是需要设置阴影

.trace:after {
    position: absolute;
    content: "";
    width: 5px;
    height: 50px;
    background-color: black;
    left: 20px;
    top: 15px;
    box-shadow: 60px 0 black, 115px 0 black;
}

最后设置打印纸

宽度120px 长度 140px 背景白色边框5px 黑色

 <div class="shell">
    <label class="button" for="button"></label>
    <div class='top'></div>
    <div class='middle'></div>
    <div class="trace"></div>
    <div class="paper"></div>
 </div>
 
 body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: #ffe5cc
}
.shell {
  position: relative;
  top: -35px;
}

.button {
    position: absolute;
    z-index: 30;
    border-radius: 50%;
    border: 5px solid black;
    background-color: #fd6e49;
    width: 15px;
    height: 15px;
    left: 90px;
    cursor: pointer;
    top: 45px;
  }
.top {
    position: absolute;
    background-color: #282c30;
    width: 160px;
    height: 70px;
    border-radius: 20px 20px 0 0;
    border: 5px solid black;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    box-shadow: inset 20px 0 #1e2124;
    z-index: -1;
}
.middle {
    position: absolute;
    background-color: #4a4f55;
    border: 5px solid black;
    width: 250px;
    height: 100px;
    border-radius: 20px;
    top: 30px;
    left: -130px;
    box-shadow: inset 20px 0 #373b3d;
    z-index: 5;
}
.trace {
    border: 5px solid black;
    width: 160px;
    height: 80px;
    border-radius: 10px;
    left: -85px;
    top: 110px;
    box-shadow: inset 0 35px #1e2124;
    z-index: 2;
}
.trace, .trace:before {
    position: absolute;
    background-color: #282c30;
}
.trace:before {
    content: "";
    width: 60px;
    height: 20px;
    border-radius: 0 0 10px 10px;
    top: 80px;
    left: 45px;
    border-bottom: 5px solid black;
    border-right: 5px solid black;
    border-left: 5px solid black;
}
.trace:after {
    position: absolute;
    content: "";
    width: 5px;
    height: 50px;
    background-color: black;
    left: 20px;
    top: 15px;
    box-shadow: 60px 0 black, 115px 0 black;
}
.paper {
    position: absolute;
    border: 5px solid black;
    background-color: white;
    width: 120px;
    height: 140px;
    top: -70px;
    left: -65px;
    z-index: 3;
}

用CSS做一台可爱的打印机

前言