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

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

　　代码解读

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

　　<figureclass="chaplin">

　　<spanclass="hat"></span>

　　<spanclass="beard"></span>

　　<spanclass="stick"></span>

　　</figure>

　　居中显示：

　　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段：

　　<figureclass="chaplin">

　　<spanclass="hat"></span>

　　<spanclass="beard"></span>

　　<spanclass="stick"></span>

　　<pclass="quote">

　　<span>adaywithout</span>

　　<span>laughter</span>

　　<span>isadaywasted</span>

　　</p>

　　</figure>

　　定位文字，并竖排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实现一张纪念卓别林的卡片”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！