CSS的第二關(guān)中,我們要學(xué)習(xí)如何設(shè)置盒子的邊框樣式,紅色的邊框?qū)挾葹?px,綠色的邊框?qū)挾葹?px,藍(lán)色的邊框?qū)挾葹?0px。同時(shí),盒子內(nèi)部的文字和背景顏色也需要適當(dāng)調(diào)整。
.box { width: 300px; height: 200px; background-color: #f2f2f2; border: 10px solid blue; padding: 20px; margin: 50px auto; } .box h1 { text-align: center; color: #555; } .box p { font-size: 18px; line-height: 1.5; } .box.red { border: 3px solid red; } .box.green { border: 5px solid green; }
我們首先給盒子設(shè)置一個(gè)默認(rèn)的邊框樣式,寬度為10px,顏色為藍(lán)色。同時(shí),盒子內(nèi)部的文字和背景顏色也進(jìn)行了設(shè)置。接著,我們使用.box.red和.box.green來設(shè)置特定顏色的邊框,分別為紅色和綠色,邊框?qū)挾确謩e為3px和5px。
如果你還沒通過CSS第二關(guān),可以嘗試使用以上代碼來解決第二關(guān)卡題目,祝好運(yùn)!