萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> css3實現input輸入框顏色漸變發光效果代碼

css3實現input輸入框顏色漸變發光效果代碼

   給邊框實現單擊顏色漸變效果,這並不是單純的box-shadow屬性而已,它的發光是像四周均勻發光,它還包含一個緩慢發光過渡效果。

  在繼續學習之前,你必須要有一些Css3的基礎知識。做出這一切需要你了解CSS3的Shadow和RGBa、Transition屬性,否則就無法理解了。

  1.制作發光邊框文本框效果

  代碼如下:

  

  然後我們要讓這個input組件在被成為焦點(點擊)時向四周發光,顯示為藍色,我只需添加一段CSS代碼:

  代碼如下:

  sdw:focus{

  transition:border linear .2s,box-shadow linear .5s;

  -moz-transition:border linear .2s,-moz-box-shadow linear .5s;

  -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;

  outline:none;border-color:rgba(93,149,242,.75);

  box-shadow:0 0 8px rgba(93,149,242,.105);

  -moz-box-shadow:0 0 8px rgba(93,149,242,.5);

  -webkit-box-shadow:0 0 8px rgba(93,149,242,3);

  }

  就可以了。其中的RGB色彩可以根據個人口味進行改變。預覽效果如下:

  2.為全局所有input組件添加邊框發光效果

  如果希望一個網頁中所有的文字輸入框出現這種效果,只需CSS全局設定即可。

  在你的CSS文件中添加這麼一句:

  復制代碼

  代碼如下:

  input[type=text]:focus,input[type=password]:focus,textarea:focus{}

copyright © 萬盛學電腦網 all rights reserved