最近，我發現了一些有趣的 CSS 題目，讓我欣喜不已。

/* 第一個題目：*/
.box{
height: 200px;
width: 200px;
background: linear-gradient(to right, red 50%, blue 50%);
}
/* 上面這段代碼，實現了將一個盒子按照中間分割，分別呈現紅色和藍色背景色的效果。*/
/* 第二個題目：*/
.box{
height: 50px;
width: 50px;
background: red;
border-radius: 50%;
}
.box:after{
content: "";
display: block;
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
margin-top: -4px;
margin-left: -4px;
}
/* 上面這段代碼，實現了將一個紅色的圓形盒子，添加一個小白點點作為裝飾的效果。*/
/* 第三個題目：*/
.wrap{
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.box{
height: 100px;
width: 100px;
background: linear-gradient(to right, red 50%, blue 50%);
transform: rotate(45deg);
}
/* 上面這段代碼，實現了將一個旋轉的漸變色正方形放在中央的效果。*/
/* 第四個題目：*/
.box{
height: 80px;
width: 80px;
background: linear-gradient(to right, red 50%, blue 50%);
position: relative;
}
.box:before{
content: "";
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
height: 40px;
width: 40px;
background: linear-gradient(to right, blue 50%, red 50%);
}
/* 上面這段代碼，實現了將一個帶有對角線的正方形在某一角上也呈現對角線的效果。*/

這些看起來簡單的 CSS 題目其實包含了很多有趣的細節和小技巧。通過這些題目的挑戰，我們可以更深入地了解和掌握 CSS 的知識和技術，同時也可以給我們的創意和想象力帶來更多的啟發。