怎么用CSS的Grid布局實(shí)現(xiàn)小雞郵票

這篇文章主要介紹了怎么用CSS的Grid布局實(shí)現(xiàn)小雞郵票，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　代碼解讀

　　定義dom，容器表示郵票：

　　<divclass="stamp">

　　</div>

　　居中顯示：

　　body{

　　margin:0;

　　height:100vh;

　　display:flex;

　　align-items:center;

　　justify-content:center;

　　background-color:teal;

　　}

　　設(shè)置容器尺寸：

　　.stamp{

　　position:relative;

　　width:57em;

　　height:71em;

　　font-size:5px;

　　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,teal50%,transparent50%),

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

　　background-size:3.5em3.5em;

　　}

　　.stamp::before{

　　top:1.5em;

　　background-repeat:repeat-y;

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

　　}

　　.stamp::after{

　　left:1.5em;

　　background-repeat:repeat-x;

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

　　}

　　在html文件中增加小雞的dom元素，子元素分別表示頭部、喙、身體、尾巴、腿、爪子、太陽、桔子：

　　<divclass="stamp">

　　<divclass="rooster">

　　<spanclass="head"></span>

　　<spanclass="beak"></span>

　　<spanclass="body"></span>

　　<spanclass="tail"></span>

　　<spanclass="leg"></span>

　　<spanclass="foot"></span>

　　<spanclass="sun"></span>

　　<spanclass="orange-stuff"></span>

　　</div>

　　</div>

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

　　.rooster{

　　display:grid;

　　grid-template-columns:22.5em13em1.75em14.5em4.5em;

　　grid-template-rows:12.5em14.5em15em8em5.5em;

　　background-color:wheat;

　　padding:2em;

　　margin-top:-2em;

　　}

　　畫出扇形的頭部：

　　.head{

　　grid-column:4;

　　grid-row:2;

　　background-color:burlywood;

　　border-top-left-radius:100%;

　　}

　　畫出小雞的眼睛和臉上的紅暈：

　　.head{

　　position:relative;

　　}

　　.head::after{

　　content:'';

　　position:absolute;

　　width:2.8em;

　　height:2.8em;

　　border-radius:50%;

　　background-color:black;

　　right:30%;

　　box-shadow:2em4em4emrgba(255,100,0,0.5);

　　}

　　畫出扇形的喙：

　　.beak{

　　grid-column:5;

　　grid-row:2;

　　height:4.5em;

　　background-color:darkorange;

　　border-bottom-right-radius:100%;

　　}

　　畫出半圓形的身體：

　　.body{

　　grid-column:2/5;

　　grid-row:3;

　　width:30em;

　　background-color:saddlebrown;

　　border-radius:0015em15em;

　　}

　　用偽元素，通過陰影畫出翅膀：

　　.body{

　　position:relative;

　　overflow:hidden;

　　}

　　.body::after{

　　content:'';

　　position:absolute;

　　width:20em;

　　height:10em;

　　border-radius:inherit;

　　box-shadow:4em2em4emrgba(0,0,0,0.3);

　　left:calc((30em-20em)/2);

　　}

　　畫出扇形的尾巴：

　　.tail{

　　grid-column:1;

　　grid-row:1/3;

　　height:22.5em;

　　background-color:burlywood;

　　align-self:end;

　　border-top-left-radius:100%;

　　}

　　畫出扇形的腿：

　　.leg{

　　grid-column:4;

　　grid-row:4;

　　width:8em;

　　background-color:burlywood;

　　border-bottom-right-radius:100%;

　　}

　　畫出扇形的小爪子：

　　.foot{

　　grid-column:4;

　　grid-row:5;

　　width:5.5em;

　　background-color:darkorange;

　　border-top-right-radius:100%;

　　}

　　畫出半圓形的太陽：

　　.sun{

　　grid-column:3/5;

　　grid-row:1;

　　width:17em;

　　--h:calc(17em/2);

　　height:var(--h);

　　background-color:darkorange;

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

　　}

　　畫出圓形的桔子和半圓形的葉片，注意此處葉片的畫法與前面畫半圓形的畫法不同：

　　.orange-stuff{

　　grid-column:1;

　　grid-row:3/6;

　　width:16em;

　　height:16em;

　　background-color:darkorange;

　　align-self:end;

　　justify-self:end;

　　border-radius:50%;

　　position:relative;

　　}

　　.orange-stuff::before{

　　content:'';

　　position:absolute;

　　width:8em;

　　height:8em;

　　background:linear-gradient(45deg,transparent50%,saddlebrown50%);

　　border-radius:50%;

　　top:-6.8em;

　　left:10%;

　　}

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

　　<divclass="stamp">

　　<divclass="puppy">

　　<!--略-->

　　</div>

　　<pclass="text">

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

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

　　<spanclass="face-value">120</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:brown;

　　}

　　設(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;

　　}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么用CSS的Grid布局實(shí)現(xiàn)小雞郵票”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!