width:150px
text-align:center
float:left
}
#navmenu2 ul{
padding:0px
margin:0px
list-style:none
}
#navmenu2 li{
margin:0px
}
#navmenu2 a{
display:block
text-decoration:none
width:120px
border:1px
border-right:10px
border-left:20px
border-color:#60C
border-style:solid
background-color:#00F
color:#FFF
padding:7px 0px 7px 0px
}
#navmenu2 a:hover {
background-color:#000
color:#09F
border-left-color:#09f
border-right-color:#09f
border-top-color:#60c
border-bottom-color:#60c
}
.Tdfont{//蓝光字体PADDING-RIGHT: 3px
PADDING-LEFT: 3px
FILTER:glow(color=#BBFFFF,strength=2)
PADDING-BOTTOM: 3px
CURSOR: hand
COLOR: #0000ff
PADDING-TOP: 3px
HEIGHT: 8pt
text-decoration: none
}
这是给你的css代码,你根据自己的需要改下吧。祝福你!
例子来自colorui及网上一些资源,不定时更新
例子都只取一个,其他的css样式都是类同的
多类选择器例子:
网上看见一个荧光效果,觉得蛮好看就扒过来分析了一下 https://www.jianshu.com/p/c501fee6fb68
荧光效果主要是:before和:after伪元素起的作用,先将其注释起来,看下原本的效果:
可以看见并没有荧光效果。
这个是给2个伪元素添加一个线性渲染的背景
有了上面蒙层的介绍,这个效果就是整体向外拉伸了2px。 z-index: -1 确保在box的黑色背景底下。注释了黑色背景来看下.box:before的效果:
和before一样,就是多了个高斯模糊,注释了黑色背景来看下.box:after的效果:
所以将3层叠加起来就有了荧光和边框效果。