这篇文章主要介绍了怎么用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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
