在網頁設計中，密碼輸入框是一個很常見的元素。為了保障用戶的賬戶安全，經常需要為密碼輸入框添加密碼的加密顯示功能。實現這一功能的方式有很多，但是通過CSS來控制密碼輸入框的樣式和加密方式是一種非常方便實用的方法。

/* 密碼輸入框樣式 */
input[type="password"] {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 2px solid #ccc;
}
/* 顯示密碼的小眼睛圖標樣式 */
.show-password {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
}
/* 密碼加密方式 */
input[type="password"]::-webkit-text-security {
display: none !important;
}
input[type="password"].show-password::-webkit-text-security {
display: initial !important;
}

上述代碼中，我們首先為密碼輸入框添加了一個基本的樣式，包括padding、字體大小、邊框圓角和邊框顏色等。同時，我們為密碼輸入框的類型設置為password，這樣可以保證用戶輸入的密碼內容被遮掩。接著，我們又添加了一個顯示密碼的圖標樣式，通過絕對定位來擺放這個圖標，并且讓它在水平垂直方向上都在密碼輸入框的中央。當用戶點擊這個圖標時，我們利用CSS的偽元素選擇器和屬性選擇器，將密碼輸入框的類型改為text，從而使用戶輸入的密碼內容明文顯示。當用戶再次點擊顯示密碼的圖標時，我們再次將密碼輸入框的類型改回password，并且將明文顯示的密碼遮蓋。

使用上述代碼可以很方便地實現密碼輸入框的樣式以及密碼加密的顯示方式，讓用戶的賬戶更加安全可靠。