在網頁開發中，alert框是非常常見的提示框。當我們需要向用戶提示一些信息時，可以使用alert框。但是alert框的樣式是默認的瀏覽器樣式，不能滿足我們的需求。因此，我們可以使用CSS來改變alert框的樣式。

首先，我們需要隱藏瀏覽器默認的alert框，然后在頁面中創建一個新的提示框。我們可以使用CSS的position屬性將提示框定位到頁面的中心。我們還可以使用z-index屬性將提示框放在頁面的最上層，確保它永遠在用戶視線中。

/* 隱藏瀏覽器默認的alert框 */
window.alert = function() {};
/* 創建提示框的HTML代碼 */
var box = document.createElement("div");
box.className = "alert-box";
box.innerHTML = "
This is an alert message!
";
/* 定義提示框樣式 */
.alert-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background-color: #FFF;
border: 1px solid #CCC;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 9999;
}
.alert-box p {
padding: 20px;
margin: 0;
font-size: 18px;
text-align: center;
}

最后，我們需要使用JavaScript來控制提示框的顯示和隱藏。當需要彈出提示框時，我們可以將提示框添加到頁面中。當用戶點擊提示框上的關閉按鈕時，我們可以將提示框從頁面中移除。

/* 彈出提示框 */
function showAlert() {
document.body.appendChild(box);
}
/* 關閉提示框 */
function closeAlert() {
document.body.removeChild(box);
}
/* 添加關閉按鈕 */
var closeBtn = document.createElement("span");
closeBtn.className = "btn-close";
closeBtn.innerHTML = "×";
closeBtn.onclick = closeAlert;
box.appendChild(closeBtn);

以上就是使用CSS來改變alert框樣式的方法。我們可以根據自己的需求來定制提示框的樣式。同時，我們還可以使用CSS3的動畫效果來增加提示框的交互性及用戶體驗。