CSS能夠非常方便地修飾HTML中的框,讓它們更加美觀和易于使用。以下是一些CSS技巧,可以幫助您修飾框。
/*設置輸入框的寬度*/ input { width: 200px; } /*設置輸入框的邊框樣式*/ input { border: 1px solid #ccc; } /*設置輸入框的背景顏色*/ input { background-color: #f5f5f5; } /*設置輸入框的圓角*/ input { border-radius: 5px; } /*設置輸入框的陰影*/ input { box-shadow: 0px 0px 5px #ccc; } /*修改輸入框的默認樣式*/ input[type=text], input[type=password] { padding: 10px; font-size: 16px; } /*設置輸入框的懸停效果*/ input:hover { border: 1px solid blue; box-shadow: 0px 0px 10px rgba(0, 0, 255, 0.5); } /*設置輸入框的聚焦效果*/ input:focus { outline: none; border: 1px solid red; box-shadow: 0px 0px 10px rgba(255, 0, 0, 0.5); }
使用這些CSS技巧可以輕松地修飾框,將它們變成您想要的樣子。當然,根據實際需求,您可以自己嘗試其他的樣式,讓您的框更加個性化。