怎么用CSS的Grid布局實現小松鼠郵票的效果

這篇文章主要介紹怎么用CSS的Grid布局實現小松鼠郵票的效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

    代碼解讀

    定義dom，容器表示郵票：

    <divclass="stamp">

    </div>

    居中顯示：

    body{

    margin:0;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background-color:teal;

    }

    設置容器尺寸：

    .stamp{

    position:relative;

    width:45em;

    height:63em;

    font-size:6px;

    padding:5em;

    background-color:white;

    }

    用重復背景繪制出郵票的齒孔：

    .stamp{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    }

    .stamp::after,

    .stamp::before{

    content:'';

    width:100%;

    height:100%;

    position:absolute;

    background:

    radial-gradient(circle,teal50%,transparent50%),

    radial-gradient(circle,teal50%,transparent50%);

    background-size:3.5em3.5em;

    }

    .stamp::before{

    top:1.5em;

    background-repeat:repeat-y;

    background-position:-4%0,104%0;

    }

    .stamp::after{

    left:1.5em;

    background-repeat:repeat-x;

    background-position:0-3%,0103%;

    }

    在html文件中增加小雞的dom元素，子元素分別表示耳朵、頭部、身體、尾巴下部、尾巴上部、腿、爪子：

    <pclass="stamp">

    <pclass="squirrel">

    <pclass="ear"></p>

    <pclass="head"></p>

    <pclass="body"></p>

    <pclass="tail-start"></p>

    <pclass="tail-end"></p>

    <pclass="leg"></p>

    <pclass="foot"></p>

    </p>

    </p>

    設置grid布局的行列尺寸：

    .squirrel{

    display:grid;

    grid-template-columns:11.5em7em15.5em10.5em;

    grid-template-rows:13em5em11.5em22.5em;

    background-color:silver;

    padding:2em;

    margin-top:-2em;

    }

    畫出扇形的頭部：

    .head{

    grid-column:1;

    grid-row:3;

    background-color:chocolate;

    border-bottom-left-radius:100%;

    }

    用徑向漸變畫出眼睛：

    .head{

    background-image:radial-gradient(

    circleat58%22%,

    black1.4em,

    transparent1.4em

    );

    }

    畫出扇形的耳朵：

    .ear{

    grid-column:2;

    grid-row:2;

    width:5em;

    background-color:bisque;

    border-bottom-right-radius:100%;

    }

    畫出扇形的身體：

    .body{

    grid-column:2/4;

    grid-row:4;

    background-color:chocolate;

    border-top-right-radius:100%;

    position:relative;

    overflow:hidden;

    }

    用偽元素，通過陰影畫出蜷曲的腿：

    .body::before{

    content:'';

    position:absolute;

    width:100%;

    height:50%;

    box-shadow:2em-2em4emrgba(0,0,0,0.3);

    bottom:0;

    --w:calc((7em+15.5em)/2);

    border-top-left-radius:var(--w);

    border-top-right-radius:var(--w);

    }

    畫出半圓形的小爪子：

    .foot{

    grid-column:1;

    grid-row:4;

    height:4em;

    width:8em;

    background-color:saddlebrown;

    justify-self:end;

    align-self:end;

    border-radius:4em4em00;

    filter:brightness(0.8);

    }

    畫出半圓形的尾巴下部：

    .tail-start{

    grid-column:4;

    grid-row:4;

    --h:calc(22.5em-1.5em);

    height:var(--h);

    background-color:bisque;

    align-self:end;

    border-radius:0var(--h)var(--h)0;

    }

    畫出半圓形的尾巴上部：

    .tail-end{

    grid-column:3;

    grid-row:1/5;

    --h:calc(13em+5em+11.5em+1.5em);

    height:var(--h);

    background-color:chocolate;

    border-radius:var(--h)00var(--h);

    }

    在dom中再增加一些文本，包括標題、作者和面值：

    <pclass="stamp">

    <pclass="puppy">

    <!--略-->

    </p>

    <pclass="text">

    <spanclass="title">Squirrel</span>

    <spanclass="author">comehope</span>

    <spanclass="face-value">200</span>

    </p>

    </p>

    設置標題的文字樣式：

    .text{

    position:relative;

    width:calc(100%+2em*2);

    height:6em;

    font-family:sans-serif;

    }

    .text.title{

    position:absolute;

    font-size:6em;

    font-weight:bold;

    color:darkslategray;

    }

    設置作者的文字樣式：

    .text.author{

    position:absolute;

    font-size:3em;

    bottom:-1.2em;

    color:dimgray;

    }

    設置面值的文字樣式：

    .text.face-value{

    position:absolute;

    font-size:14em;

    right:0;

    line-height:0.9em;

    color:darkcyan;

    }

    大功告成！

以上是“怎么用CSS的Grid布局實現小松鼠郵票的效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！