怎么用纯CSS实现一张纪念卓别林的卡片

这篇文章给大家分享的是有关怎么用纯CSS实现一张纪念卓别林的卡片的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

站在用户的角度思考问题，与客户深入沟通，找到陆河网站设计与陆河网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广、国际域名空间、网页空间、企业邮箱。业务覆盖陆河地区。

代码解读

定义dom，容器中包含的3个元素分别代表帽子、胡须和手杖：

居中显示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

}

定义容器尺寸，并设置子元素水平居中：

.chaplin{

width:40em;

height:30em;

font-size:10px;

background-color:#eee;

box-shadow:003emrgba(0,0,0,0.2);

display:flex;

flex-direction:column;

align-items:center;

}

定义默认颜色，后面用currentColor引用此颜色：

.chaplin{

color:#555;

}

画出帽子的轮廓：

.chaplin{

position:relative;

}

.hat{

position:absolute;

width:6.4em;

height:4.6em;

background-color:currentColor;

border-radius:2.3em2.3em00;

top:1.4em;

}

用伪元素画出帽沿：

.hat::before{

content:'';

position:absolute;

width:10em;

height:0.8em;

background-color:currentColor;

border-radius:0.4em;

top:calc(100%+0.4em);

left:calc((100%-10em)/2);

}

画出胡子：

.beard{

position:absolute;

width:1.5em;

height:0;

top:11.6em;

border:solidtransparent;

border-width:00.4em1em0.4em;

border-bottom-color:currentColor;

}

画出手杖的杖杆：

.stick{

position:absolute;

width:0.8em;

height:10.5em;

background-color:currentColor;

bottom:0;

}

用::before伪元素画出手杖的握柄：

.stick::before{

content:'';

position:absolute;

box-sizing:border-box;

width:5.6em;

height:3em;

border:0.8emsolid;

border-radius:5.6em5.6em00;

border-bottom:none;

top:-3em;

}

用::after伪元素修饰握柄的端点，使其圆润自然：

.stick::after{

content:'';

position:absolute;

width:0.8em;

height:0.8em;

background-color:currentColor;

border-radius:50%;

left:calc(5.6em-0.8em);

top:-0.4em;

}

使手杖水平居中：

.stick{

left:calc((100%-(5.6em-0.8em))/2);

}

至此，抽象的卓别林形象完成，接下来排版一句他的名言。

在dom中增加一个.quote元素，并把一句话分为3段：

adaywithout

laughter

isadaywasted

定位文字，并竖排3段文字：

.quote{

position:absolute;

left:50%;

bottom:2.5em;

font-family:sans-serif;

text-transform:uppercase;

font-weight:bold;

display:flex;

flex-direction:column;

}

调整字号和字间距，使3段文字对齐：

.quotespan:nth-child(1){

letter-spacing:0.05em;

}

.quotespan:nth-child(2){

font-size:1.6em;

}

感谢各位的阅读！关于“怎么用纯CSS实现一张纪念卓别林的卡片”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！