在JavaScript中，原生的`alert`函数并不支持直接通过CSS来更改样式，因为它是由浏览器提供的，并且样式通常受到浏览器样式表的控制。然而，你可以通过一些替代方案来实现类似`alert`的弹出框，并自定义其样式。
一个常见的做法是使用HTML、CSS和JavaScript来创建一个模态框（modal），这样你就可以完全控制它的样式了。以下是一个简单的例子，展示了如何创建一个自定义样式的模态框：
<!DOCTYPE html>
<html>
<head>
<title>自定义Alert样式</title>
<style>
/* 模态框（背景） */
.modal {
display: none; /* 默认隐藏 */
position: fixed; /* 固定定位 */
z-index: 1; /* 位于顶层 */
left: 0;
top: 0;
width: 100%; /* 宽度铺满 */
height: 100%; /* 高度铺满 */
overflow: auto; /* 如果需要，添加滚动条 */
background-color: rgb(0,0,0); /* 背景颜色 */
background-color: rgba(0,0,0,0.4); /* 黑色背景，带有透明度 */
}
/* 模态内容框 */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% 顶部距离，水平居中 */
padding: 20px;
border: 1px solid #888;
width: 80%; /* 宽度 */
}
/* 关闭按钮 */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 触发模态框的按钮 -->
<button id="myBtn">打开模态框</button>
<!-- 模态框 -->
<div id="myModal" class="modal">
<!-- 模态内容 -->
<div class="modal-content">
<span class="close">×</span>
<p>这是一个自定义样式的模态框！</p>
</div>
</div>
<script>
// 获取模态框
var modal = document.getElementById("myModal");
// 获取打开模态框的按钮
var btn = document.getElementById("myBtn");
// 获取 <span> 元素，设置关闭按钮
var span = document.getElementsByClassName("close")[0];
// 点击按钮打开模态框
btn.onclick = function() {
modal.style.display = "block";
}
// 点击 <span> (x), 关闭模态框
span.onclick = function() {
modal.style.display = "none";
}
// 当用户点击模态框以外的区域时，关闭它
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
在这个例子中，`.modal`类定义了模态框的背景样式，而`.modal-content`类定义了模态内容的样式，包括背景颜色、边框等。你可以根据需要调整这些样式。点击“打开模态框”按钮会显示自定义样式的模态框，点击关闭按钮或模态框外部会关闭它。