CSS的第二關中,我們要學習如何設置盒子的邊框樣式,紅色的邊框寬度為3px,綠色的邊框寬度為5px,藍色的邊框寬度為10px。同時,盒子內部的文字和背景顏色也需要適當調整。
.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; }
我們首先給盒子設置一個默認的邊框樣式,寬度為10px,顏色為藍色。同時,盒子內部的文字和背景顏色也進行了設置。接著,我們使用.box.red和.box.green來設置特定顏色的邊框,分別為紅色和綠色,邊框寬度分別為3px和5px。
如果你還沒通過CSS第二關,可以嘗試使用以上代碼來解決第二關卡題目,祝好運!
上一篇css第五章上機訓練3
下一篇css第二段向第一段對齊