CSS自動生成驗證碼是一種非常方便的方法，可以輕松實現用戶注冊、登錄等場景下的驗證碼驗證。下面我們來詳細了解一下如何實現這一功能。

/* 生成隨機數 */
function randomize(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
/* 生成隨機顏色 */
function randomizeColor() {
let color = "#";
for (let i = 0; i < 6; i++) {
color += randomize(0, 15).toString(16);
}
return color;
}
/* 生成驗證碼 */
function generateCode() {
let code = "";
for (let i = 0; i < 4; i++) {
code += String.fromCharCode(randomize(65, 90));
}
return code;
}
/* 自定義驗證碼樣式 */
#captchaCode {
font-size: 32px;
color: ${randomizeColor()};
letter-spacing: 8px;
transform: rotate(${randomize(-30, 30)}deg);
text-shadow: -1px -1px 0 ${randomizeColor()}, 1px -1px 0 ${randomizeColor()}, -1px 1px 0 ${randomizeColor()}, 1px 1px 0 ${randomizeColor()};
}
/* 頁面中的HTML元素 */
<h1>歡迎注冊！</h1>
<p>請輸入以下驗證碼：</p>
<p id="captchaCode">${generateCode()}</p>
<button>注冊</button>

以上是實現自動生成驗證碼的代碼示例，我們可以根據實際需求自定義驗證碼的樣式，比如字體大小、顏色、旋轉角度及陰影等。同時，通過JS代碼可以隨機生成驗證碼，確保安全性。