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>

最方便的就是用PS先给图片做个外发光出来，然后切图直接把发光部分一起切出来导成PNG格式的发光部分为透明背景的图片，如果是想做鼠标触发效果，那就再做一张大小一样的没外发光的图片

CSS样式无法直接写出外发光效果，不过有一个方法可以做出来，如果外发光的扩散范围不大，大概是3px-5px；就可以通过div嵌套并调整边框颜色来达到一定的效果，不过这种方法挺麻烦的，不怎么好用

举例：

</div>

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

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

html5如何让边框发光

发表评论

评论列表（0条）