這篇文章給大家分享的是有關(guān)怎么用純CSS實(shí)現(xiàn)一張紀(jì)念卓別林的卡片的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
站在用戶的角度思考問題，與客戶深入溝通，找到陸河網(wǎng)站設(shè)計(jì)與陸河網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋陸河地區(qū)。
代碼解讀
定義dom，容器中包含的3個(gè)元素分別代表帽子、胡須和手杖：
居中顯示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
定義容器尺寸，并設(shè)置子元素水平居中：
.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;
}
定義默認(rèn)顏色，后面用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偽元素修飾握柄的端點(diǎn)，使其圓潤自然：
.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中增加一個(gè).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;
}
調(diào)整字號(hào)和字間距，使3段文字對(duì)齊：
.quotespan:nth-child(1){
letter-spacing:0.05em;
}
.quotespan:nth-child(2){
font-size:1.6em;
}
感謝各位的閱讀！關(guān)于“怎么用純CSS實(shí)現(xiàn)一張紀(jì)念卓別林的卡片”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
重慶分公司
重慶分公司
