html5如何让边框发光_随笔

html5让边框发光，就是给那个边框加上一层外阴影，然后使用一个不同于边框的颜色就行了，通过box-shadow来设置，它的一些属性有：X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色；这里我写一些代码更容易理解：<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>

.pagetitle {height:20line-height:150%FILTER:Glow(Color=#a0ffa0,Strength=5)font-

size:18pttext-align:center}

</style>

<p class=pagetitle>发光不发关，就看你怎么设置滤镜的参数。还急，你可以查看别人的HTML代码呀，不知道你是否说的这个。还在问呀，你看不出我的全部回复就是一段法光的HTML吗，你复制到你的HTML文件里面试试看吧</p>

试试如下代码:

<div id="cont" style="filter:glow(color:#DD002C,strength=3)height:12pxcolor:#ffffff">发光字就这么简单</div>

istr="哈哈哈，走马灯，发光字，全来到,"

ostr="<h6><table></tr>"

for(i=0i<istr.lengthi++){

ostr=ostr+"<td id='c"+i+"' style='filter:glow(color:#DD002C,strength=5)height:12pxcolor:#fffffffont-size:36.0ptfont-family:宋体'>"+istr.substr(i,1)+"</td>"

}

ostr=ostr+"</tr></table>"

document.getElementById("cont").innerHTML=ostr

function flash(){

var col=new Array("#000088","#0000ff","#008800","#0088ff","#00ffff","#ff0000","#ff0088","#ff00ff","#ff8800","#fff8888","#ffff00","#ffff88")

for(i=0i<istr.lengthi++){

document.getElementById("c"+i).filters.item("glow").color=col[Math.floor(11*Math.random())]

}

for(i=0i<istr.length-1i++){

document.getElementById("c"+i).innerHTML=document.getElementById("c"+(i+1)).innerHTML

}

document.getElementById("c"+i).innerHTML=document.getElementById("c0").innerHTML

}

setInterval("flash()",500)

</script>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6114720.html

html5如何让边框发光

发表评论

评论列表（0条）