<!-- 定义一个desk容器：包含纸张、尺子、笔记本、日历、铅笔 -->

<div class="desk">

    <span class="paper"></span>

    <span class="ruler"></span>

    <span class="notebook"></span>

    <span class="calendar"></span>

    <span class="pencil"></span>

</div>

html, body {

    margin:;

    padding:;

}

/* 设置body的子元素水平垂直居中 */

body{

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

}

/* 设置desk的样式 */

.desk{

    position:relative;

    /* font-size:12;这是默认值，只可增大，同时影响desk的width、height */

    font-size: 12px;

    width: 35em;

    height: 35em;

    /* border: 1px solid black; */

    --b: 0.5em solid darkslategray;

}

/* 直接定义desk的子元素共有属性 */

.desk * {

    position: absolute;

    border: var(--b);

    /* 设置width、height的值包括border、padding、content */

    box-sizing: border-box;

    /* 过渡时间 */

    transition: 1s;

}

.desk *::before,

.desk *::after{

    content: '';

    position: absolute;

    box-sizing: border-box;

}

/* 画出纸张的轮廓 */

.paper{

    width: 12em;

    height: 15em;

    border-radius: 0 0 0 1.5em;

    color: skyblue;

    background-color: currentColor;

    top: 7em;

    left: 2em

}

/* 设置paper纸张左侧卷曲的部分 */

.paper::before{

    width: 2em;

    height: 16em;

    background-color: currentColor;

    border: var(--b);

    border-radius: 1.5em 0;

    left: -0.5em;

    bottom: 0.8em;

    filter: saturate(150%) brightness(0.9);

}

.paper::after{

    width: 2em;

    height: 2.5em;

    background-color: currentColor;

    border: var(--b);

    border-radius: 1.75em 0 0 1.75em;

    border-right: none;

    bottom: -0.5em;

    left: -0.5em;

}

/* 增加鼠标悬停效果 */

.desk:hover .paper{

    top:;

    left:;

}