DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 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{}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved