怎么用純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實現一張紀念卓別林的卡片”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！