达州做网站
大橙子网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么用CSS的Grid布局实现小鸡邮票
这篇文章主要介绍了怎么用CSS的Grid布局实现小鸡邮票，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
为华龙等地区用户提供了全套网页设计制作服务，及华龙网站建设行业解决方案。主营业务为成都网站建设、做网站、华龙网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
代码解读
定义dom，容器表示邮票：
居中显示：
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元素，子元素分别表示头部、喙、身体、尾巴、腿、爪子、太阳、桔子：