如果用過twitter,你可能已經留意到當輸入框獲得焦點後,它的邊框會有藍色發光的效果,並且這裡運用了transition屬性,使得光暈效果有很平滑的過渡。本教程將講述如何運用box-shadow屬性來做到這樣的效果。
CSS代碼如下:
- input {
- transition: all 0.30s ease-in-out;
- -webkit-transition: all 0.30s ease-in-out;
- -moz-transition: all 0.30s ease-in-out;
- outline:none;
- }
這裡通過運用transition屬性來展現input框的變化。
同時,這裡需要用outline屬性來使safari和chrome的預設高亮無效。
這裡在使用box-shadow屬性時,為了使其不像是陰影製作效果而達到發光的效果,因而採用了明亮的藍色。
同時也可以用RGBA,這樣就可以控制顏色的透明度了。
代碼如下:
- input:focus {
- border:#35a5e5 1px solid;
- box-shadow: 0 0 5px rgba(81, 203, 238, 1);
- -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
- -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
- }
同時可以用border-radius屬性來做圓角效果。
完整CSS代碼如下:
- input {
- transition: all 0.30s ease-in-out;
- -webkit-transition: all 0.30s ease-in-out;
- -moz-transition: all 0.30s ease-in-out;
- border: #35a5e5 1px solid;
- border-radius: 4px;
- outline: none;
- }
- input:focus {
- box-shadow: 0 0 5px rgba(81, 203, 238, 1);
- -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
- -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
- }
原文連結:http://htmltips.info/css-for-intermediaries/box-shadow-css-glow-effect/