怎么用CSS的Grid布局实现小松鼠邮票的效果

    居中显示：

    body{

    margin:0;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background-color:teal;

    }

    设置容器尺寸：

    .stamp{

    position:relative;

    width:45em;

    height:63em;

    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%0,104%0;

    }

    .stamp::after{

    left:1.5em;

    background-repeat:repeat-x;

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

    }

    在html文件中增加小鸡的dom元素，子元素分别表示耳朵、头部、身体、尾巴下部、尾巴上部、腿、爪子：

   

   

   

   

   

   

   

   

   

   

   

    设置grid布局的行列尺寸：

    .squirrel{

    display:grid;

    grid-template-columns:11.5em7em15.5em10.5em;

    grid-template-rows:13em5em11.5em22.5em;

    background-color:silver;

    padding:2em;

    margin-top:-2em;

    }

    画出扇形的头部：

    .head{

    grid-column:1;

    grid-row:3;

    background-color:chocolate;

    border-bottom-left-radius:100%;

    }

    用径向渐变画出眼睛：

    .head{

    background-image:radial-gradient(

    circleat58%22%,

    black1.4em,

    transparent1.4em

    );

    }

    画出扇形的耳朵：

    .ear{

    grid-column:2;

    grid-row:2;

    width:5em;

    background-color:bisque;

    border-bottom-right-radius:100%;

    }

    画出扇形的身体：

    .body{

    grid-column:2/4;

    grid-row:4;

    background-color:chocolate;

    border-top-right-radius:100%;

    position:relative;

    overflow:hidden;

    }

    用伪元素，通过阴影画出蜷曲的腿：

    .body::before{

    content:'';

    position:absolute;

    width:100%;

    height:50%;

    box-shadow:2em-2em4emrgba(0,0,0,0.3);

    bottom:0;

    --w:calc((7em+15.5em)/2);

    border-top-left-radius:var(--w);

    border-top-right-radius:var(--w);

    }

    画出半圆形的小爪子：

    .foot{

    grid-column:1;

    grid-row:4;

    height:4em;

    width:8em;

    background-color:saddlebrown;

    justify-self:end;

    align-self:end;

    border-radius:4em4em00;

    filter:brightness(0.8);

    }

    画出半圆形的尾巴下部：

    .tail-start{

    grid-column:4;

    grid-row:4;

    --h:calc(22.5em-1.5em);

    height:var(--h);

    background-color:bisque;

    align-self:end;

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

    }

    画出半圆形的尾巴上部：

    .tail-end{

    grid-column:3;

    grid-row:1/5;

    --h:calc(13em+5em+11.5em+1.5em);

    height:var(--h);

    background-color:chocolate;

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

    }

    在dom中再增加一些文本，包括标题、作者和面值：

   

   

   

   

   

    Squirrel

    comehope

    200

   

   

    设置标题的文字样式：

    .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:darkslategray;

    }

    设置作者的文字样式：

    .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布局实现小松鼠邮票的效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

分享名称：怎么用CSS的Grid布局实现小松鼠邮票的效果
文章转载：http://csdahua.cn/article/gijsdj.html