剛研究了bootstrap中css里面的源碼,找到了表單(form)中關於輸入框的一些設置,根據要求,label標簽和input標簽需要一起使用,(屏幕閱讀器中不能單獨辨認input),如需隱藏label標簽,在label中設置.sr-only這個class即可.看了下.form-control這個屬性(應用在input標簽上),下面是這個css樣式.
1 .form-control { 2 display: block; 3 width: 100%; 4 height: 34px; 5 padding: 6px 12px; 6 font-size: 14px; 7 line-height: 1.42857143; 8 color: #555; 9 background-color: #fff; 10 background-image: none; 11 border: 1px solid #ccc; 12 border-radius: 4px; 13 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 14 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 15 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 16 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 17 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 18 }
我們發現它做了transition的效果,box-shadow的ease-in-out .15s的過渡時間,inset表示內陰影,類似ps中blur shadow的效果.改變這個時間可以產生點擊input框,那種淺藍色的效果出現的時間就會相應改變.不過bootstrap這些事件設置的很好,不需要做什么修改,只是給以后做這種類似的效果一個思路罷了.
http://blog.csdn.net/freshlover/article/details/7610269這里有詳細的介紹各個參數的.就不多說了.
主要是從中要思考到,動畫效果的加入,不單單是一個陰影的使用.