Understanding in the Box-shadow (bootstrap)

Just researched the source code in the CSS in the bootstrap, found the form (form) about the input box some settings, according to the requirements, label label and input tag need to use together, (screen reader can not be identified in separate input), if you want to hide the label label, Set the. Sr-only class in the label. Look down. Form-control this attribute (applied on the Input tab), here is the CSS style.

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;Ten Background-image:None; One Border:1px solid #ccc; A Border-radius:4px; - -webkit-box-shadow:inset 0 1px 1px rgba (0, 0, 0,. 075); - Box-shadow:inset 0 1px 1px rgba (0, 0, 0,. 075); the -webkit-transition:Border-color ease-in-out. 15s,-webkit-box-shadow ease-in-out. 15s; - -o-transition:Border-color ease-in-out. 15s, Box-shadow ease-in-out. 15s; - transition:Border-color ease-in-out. 15s, Box-shadow ease-in-out. 15s; -}

We found that it did the transition effect, Box-shadow the ease-in-out. 15s transition time, inset represents the inner shadow, similar to the effect of Blur shadow in Ps. Change this time can produce click Input box, The light blue effect will change in time. But bootstrap these events are well set and do not need to be modified, just give a thought to do this kind of effect later.

http://blog.csdn.net/freshlover/article/details/7610269 here is a detailed description of each parameter. It's not much to say.

The main is to think about, the animation effect of the addition, is not only a shadow of the use.

Understanding in the Box-shadow (bootstrap)