這篇文章主要介紹了怎么用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:57em;
height:71em;
font-size:5px;
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:-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>
設置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中再增加一些文本，包括標題、作者和面值：
<divclass="stamp">
<divclass="puppy">
<!--略-->
</div>
<pclass="text">
<spanclass="title">Rooster</span>
<spanclass="author">comehope</span>
<spanclass="face-value">120</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:brown;
}
設置作者的文字樣式：
.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布局實現小雞郵票”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
