單一div 的多種背景顏色
在某些情況下，將多種背景顏色應用於div 比使用背景圖像或附加內容更有優勢分割區。 CSS提供了多種方法來實現這種效果。
1.兩種或多種顏色的線性漸變：
要使用兩種顏色創建“A”，如圖所示，請使用具有四個位置的線性漸層：
background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
2.為“C”創建較小的部分：
對於“C”，使用類似於“A”的線性漸變，但添加一個具有白色背景的:after 選擇器來模擬較小的藍色部分：
background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%);
.c:after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 50%;
height: 20%;
background-color: white;
}「C」的改良替代方案：
先前的解決方案創造了與白色部分重疊的效果。更好的選擇是使用 'background-clip' 屬性，它允許您將背景剪輯為指定的形狀：
background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); background-clip: border-box;
以上是如何用CSS實作單一div內多種背景顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
