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:40.5em;

　　height:71em;

　　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.5%0,104.5%0;

　　}

　　.stamp::after{

　　left:1.5em;

　　background-repeat:repeat-x;

　　background-position:0-2.5%,0102.5%;

　　}

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

　　<divclass="stamp">

　　<divclass="puppy">

　　<spanclass="ear"></span>

　　<spanclass="head"></span>

　　<spanclass="eyes"></span>

　　<spanclass="tongue"></span>

　　<spanclass="body"></span>

　　<spanclass="tail"></span>

　　<spanclass="foot"></span>

　　</div>

　　</div>

　　設置grid布局的行列尺寸：

　　.puppy{

　　display:grid;

　　grid-template-columns:10em22.5em8em;

　　grid-template-rows:21em12.5em3.75em22.5em;

　　background-color:tan;

　　padding:2em;

　　margin-top:-1em;

　　}

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

　　.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;

　　}

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

　　.head{

　　position:relative;

　　overflow:hidden;

　　}

　　.head::before{

　　content:'';

　　position:absolute;

　　width:7em;

　　height:7em;

　　border-bottom-right-radius:100%;

　　background-color:sienna;

　　}

　　畫出半圓形的眼暈：

　　.eyes{

　　grid-column:2;

　　grid-row:2;

　　justify-self:end;

　　position:relative;

　　height:10.5em;

　　width:21em;

　　border-radius:0010.5em10.5em;

　　background-color:sienna;

　　}

　　用徑向漸變畫出眼珠：

　　.eyes{

　　background-image:radial-gradient(

　　circleat37%33%,

　　black1.4em,

　　transparent1.4em

　　);

　　}

　　畫出半圓形的耳朵：

　　.ear{

　　grid-column:2;

　　grid-row:1;

　　justify-self:end;

　　width:10.5em;

　　border-radius:21em0021em;

　　background-color:sienna;

　　}

　　畫出扇形的舌頭：

　　.tongue{

　　grid-column:1;

　　grid-row:3;

　　width:5.5em;

　　height:5.5em;

　　background-color:indianred;

　　border-bottom-left-radius:100%;

　　}

　　畫出扇形的身體：

　　.body{

　　grid-column:2;

　　grid-row:4;

　　background-color:sienna;

　　border-top-left-radius:100%;

　　}

　　用偽元素，通過陰影畫出中蹲著的腿：

　　.body{

　　position:relative;

　　overflow:hidden;

　　}

　　.body::after{

　　content:'';

　　position:absolute;

　　height:50%;

　　width:100%;

　　border-radius:11.25em11.25em00;

　　box-shadow:2em04emrgba(0,0,0,0.3);

　　bottom:0;

　　}

　　畫出半圓形的尾巴：

　　.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.5em0017.5em;

　　}

　　畫出半圓形的小爪子：

　　.foot{

　　grid-column:3;

　　grid-row:4;

　　align-self:end;

　　height:4em;

　　background-color:bisque;

　　border-radius:4em4em00;

　　}

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

　　<divclass="stamp">

　　<divclass="puppy">

　　<!--略-->

　　</div>

　　<pclass="text">

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

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

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

　　</p>

　　</div>

　　設置標題的文字樣式：

　　.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;

　　}

　　設置作者的文字樣式：

　　.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布局怎么實現小狗郵票”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！