html5如何讓邊框發(fā)光

html5讓邊框發(fā)光，就是給那個邊框加上一層外陰影，然后使用一個不同于邊框的顏色就行了，通過box-shadow來設置，它的一些屬性有：

創(chuàng)新互聯(lián)公司服務項目包括建平網站建設、建平網站制作、建平網頁制作以及建平網絡營銷策劃等。多年來，我們專注于互聯(lián)網行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網行業(yè)的解決方案，建平網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到建平省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

X-offset:陰影水平偏移量，其值可以是正負值。如果值為正值，則陰影在對象的右邊，其值為負值時，陰影在對象的左邊；

Y-offset:陰影垂直偏移量，其值也可以是正負值。如果為正值，陰影在對象的底部，其值為負值時，陰影在對象的頂部；

陰影模糊半徑：此參數可選，，但其值只能是為正值，如果其值為0時，表示陰影不具有模糊效果，其值越大陰影的邊緣就越模糊；

陰影擴展半徑：此參數可選，其值可以是正負值，如果值為正，則整個陰影都延展擴大，反之值為負值時，則縮小；

陰影顏色：此參數可選。如不設定顏色，瀏覽器會取默認色，但各瀏覽器默認取色不一致，特別是在webkit內核下的safari和chrome瀏覽器下表現(xiàn)為透明色；

這里我寫一些代碼更容易理解：

html

head

style

#but{

width:200px;

height:200px;

box-shadow:-10px 0 10px red, /*左邊陰影*/

}

/style

/head

body

div id='but'

p我是測試文字/p

/div

/body

/html

HTML5+CSS3小實例：鼠標懸停發(fā)光按鈕

HTML5+CSS3做一組鼠標懸停發(fā)光的按鈕，鼠標懸停，按鈕邊框延展開來，首尾相連時填充按鈕，過程伴隨發(fā)光、倒影效果，并通過hue-rotate實現(xiàn)每個按鈕不同顏色。

效果：

源碼：

HTML5 有哪些讓你驚艷的 demo？

說起特效來，HTML5還是很值得稱道的：

1、HTML5 Canvas發(fā)光Loading動畫

之前我們分享過很多基于CSS3的Loading動畫效果，相信大家都很喜歡。今天我們要來分享一款基于HTML5Canvas的發(fā)光Loading加載動畫特效。Loading旋轉圖標是在canvas畫布上繪制的，整個loading動畫是發(fā)光3D的視覺效果，HTML5非常強大。

2、jQuery球狀放大鏡特效插件

今天我們要來分享一款基于jQuery的放大鏡特效插件，和其他放大鏡不同的是，這款jQuery放大鏡插件是球狀的，看上去有3D的視覺效果。當你把鼠標滑過頁面上的文字時，即會出現(xiàn)很酷的球狀放大鏡，來放大當前區(qū)域的文字。并且以球心為中心點向外文字逐漸變小，這就產生了立體感。

3、HTML5 Canvas粒子模擬效果

這是一款利用Canvas模擬出來的30000個粒子動畫，當你用鼠標在canvas畫布上移動時，鼠標周圍的一些粒子就會跟著你移動，并形成一定的圖案，就像你在玩沙畫一樣，效果非常不錯。這里，我們應用了一些HTML5的特性，讓這個粒子動畫顯得相當動感。

4、HTML5/CSS3帶區(qū)域地圖的聯(lián)系表單

之前我們分享很多樣式和功能各異的CSS3聯(lián)系表單，比如HTML5/CSS3簡易聯(lián)系表單等等，都非常不錯。今天我們要來分享一款功能更加強大的HTML5/CSS3聯(lián)系表單，它可以選中不同區(qū)域顯示相應的地圖，然后針對該區(qū)域填寫聯(lián)系表單。

5、CSS3 3D立方體Loading加載動畫特效

之前我們分享過一些HTML5和CSS3的3D立方體特效，他們都是可以旋轉來展示3D立體的效果。這次分享的這款CSS3 3D立方體確是用來做Loading加載動畫的，9個小立方體上下浮動，呈現(xiàn)波浪的效果，并且，這個Loading動畫還利用了CSS3的陰影屬性讓這些立方體更充滿3D色彩。

希望你也可以學起來呀~