小编给大家分享一下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布局怎么实现小狗邮票”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！
