小編給大家分享一下怎么使用CSS的Grid布局實(shí)現(xiàn)小狗郵票，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供望奎網(wǎng)站建設(shè)、望奎做網(wǎng)站、望奎網(wǎng)站設(shè)計(jì)、望奎網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、望奎企業(yè)網(wǎng)站模板建站服務(wù)，10多年望奎做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

效果預(yù)覽

源代碼下載

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，容器表示郵票：

<div class="stamp">
</div>

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: teal;
}

設(shè)置容器尺寸：

.stamp {
    position: relative;
    width: 40.5em;
    height: 71em;
    font-size: 6px;
    padding: 5em;
    background-color: white;
}

用重復(fù)背景繪制出郵票的齒孔：

.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, teal 50%, transparent 50%),
    radial-gradient(circle, teal 50%, transparent 50%);
    background-size: 3.5em 3.5em;
}

.stamp::before {
    top: 1.5em;
    background-repeat: repeat-y;
    background-position: -4.5% 0, 104.5% 0;
}

.stamp::after {
    left: 1.5em;
    background-repeat: repeat-x;
    background-position: 0 -2.5%, 0 102.5%;
}

在 html 文件中增加小狗的 dom 元素，子元素分別表示耳朵、頭部、眼睛、舌頭、身體、尾巴和爪子：

<div class="stamp">
    <div class="puppy">
        <span class="ear"></span>
        <span class="head"></span>
        <span class="eyes"></span>
        <span class="tongue"></span>
        <span class="body"></span>
        <span class="tail"></span>
        <span class="foot"></span>
    </div>
</div>

設(shè)置 grid 布局的行列尺寸：

.puppy {
    display: grid;
    grid-template-columns: 10em 22.5em 8em;
    grid-template-rows: 21em 12.5em 3.75em 22.5em;
    background-color: tan;
    padding: 2em;
    margin-top: -1em;
}

畫(huà)出小狗的頭部，跨第1列和第2列、第2行和第3行，是一個(gè)半圓形：

.head {
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    border-bottom-left-radius: calc(12.5em + 3.75em);
    border-bottom-right-radius: calc(12.5em + 3.75em);
    background-color: bisque;
}

用偽元素畫(huà)出鼻子，是一個(gè)扇形，多余的部分被隱藏了：

.head {
    position: relative;
    overflow: hidden;
}

.head::before {
    content: '';
    position: absolute;
    width: 7em;
    height: 7em;
    border-bottom-right-radius: 100%;
    background-color: sienna;
}

畫(huà)出半圓形的眼暈：

.eyes {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    position: relative;
    height: 10.5em;
    width: 21em;
    border-radius: 0 0 10.5em 10.5em;
    background-color: sienna;
}

用徑向漸變畫(huà)出眼珠：

.eyes {
    background-image: radial-gradient(
        circle at 37% 33%,
        black 1.4em,
        transparent 1.4em
    );
}

畫(huà)出半圓形的耳朵：

.ear {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 10.5em;
    border-radius: 21em 0 0 21em;
    background-color: sienna;
}

畫(huà)出扇形的舌頭：

.tongue {
    grid-column: 1;
    grid-row: 3;
    width: 5.5em;
    height: 5.5em;
    background-color: indianred;
    border-bottom-left-radius: 100%;
}

畫(huà)出扇形的身體：

.body {
    grid-column: 2;
    grid-row: 4;
    background-color: sienna;
    border-top-left-radius: 100%;
}

用偽元素，通過(guò)陰影畫(huà)出中蹲著的腿：

.body {
    position: relative;
    overflow: hidden;
}

.body::after {
    content: '';
    position: absolute;
    height: 50%;
    width: 100%;
    border-radius: 11.25em 11.25em 0 0;
    box-shadow: 2em 0 4em rgba(0, 0, 0, 0.3);
    bottom: 0;
}

畫(huà)出半圓形的尾巴：

.tail {
    grid-column: 1;
    grid-row: 4;
    justify-self: end;
    align-self: end;
    height: 17.5em;
    width: 8.75em;
    background-color: bisque;
    border-radius: 17.5em 0 0 17.5em;
}

畫(huà)出半圓形的小爪子：

.foot {
    grid-column: 3;
    grid-row: 4;
    align-self: end;
    height: 4em;
    background-color: bisque;
    border-radius: 4em 4em 0 0;
}

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

<div class="stamp">
    <div class="puppy">
        <!-- 略 -->
    </div>
    <p class="text">
        <span class="title">Puppy</span>
        <span class="author">comehope</span>
        <span class="face-value">80</span>
    </p>
</div>

設(shè)置標(biāo)題的文字樣式：

.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: sienna;
}

設(shè)置作者的文字樣式：

.text .author {
    position: absolute;
    font-size: 3em;
    bottom: -1.2em;
    color: dimgray;
}

設(shè)置面值的文字樣式：

.text .face-value {
    position: absolute;
    font-size: 14em;
    right: 0;
    line-height: 0.9em;
    color: darkcyan;
}

以上是怎么使用CSS的Grid布局實(shí)現(xiàn)小狗郵票的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：怎么使用CSS的Grid布局實(shí)現(xiàn)小狗郵票
瀏覽路徑：http://jinyejixie.com/article10/iiscdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、品牌網(wǎng)站建設(shè)、虛擬主機(jī)、用戶體驗(yàn)、云服務(wù)器、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)