CSS3的表單效果為網站設計帶來了更多的可能性。通過使用CSS3的一些新屬性和選擇器,我們可以為表單添加更多視覺上的效果,以更好的展示網站的樣式和風格。
/* 美化輸入框的樣式 */ input[type="text"], input[type="email"], input[type="password"] { border: none; border-bottom: 2px solid #ccc; outline: none; padding: 10px; font-size: 16px; color: #666; transition: border-bottom-color .5s; } /* 輸入框聚焦時的樣式 */ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus { border-bottom-color: #888; } /* 提交按鈕的樣式 */ input[type="submit"] { padding: 10px 20px; background-color: #333; color: #fff; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; transition: background-color .5s; } /* 鼠標懸停在提交按鈕上的樣式 */ input[type="submit"]:hover { background-color: #555; }
以上代碼展示了如何美化輸入框和提交按鈕的樣式。我們可以使用border-bottom將輸入框的下邊框線條化,使用聚焦狀態的偽類:focus來更改輸入框的樣式。提交按鈕的樣式則通過設置背景顏色、字體顏色和邊框樣式來實現。使用:hover偽類可將按鈕的背景顏色在鼠標懸停時更改。
除此之外,我們還可以通過一些其他的CSS3屬性和選擇器來對表單添加更多的效果,例如使用box-shadow為輸入框和按鈕添加投影效果,使用text-transform轉換文本大小寫,使用placeholder屬性為輸入框添加提示文字等等。
以上就是一些CSS3表單效果實例的介紹,希望能對您的網站設計有所幫助。
下一篇css3 自定義樣式