昨天学会了怎么用CSS打造下拉菜单,今天于是想想怎么通过CSS制作下拉菜单的箭头,在网站上随便找了个网站查看其代码,还是不甚其解,百度一番无果后转战google,果然还是google强大,直接搜索到了自己想要的结果,CSS制作下拉菜单也解决了顺便学习了一下一个不起眼的css样式,那就是border-color.
首先我直接把代码贴在这里,下面做详细解释:
.site { width:auto; height:auto; background-color:#fff; position:relative; } .site b { border-color: #666 #fff #fff; border-style: solid; border-width: 4px; position:absolute; top:7px; } <div> 这就是下拉的小三角形 <b> </b> </div>
这里面通过border-color实现了一个三角形,经过自己的实践,border-color可以有四个颜色值,他们分别对应上,右,下、左三个角。以前都只有见到只有一个值的,那就是整个的都是这个颜色,你还可以只写三个值,或者两个值都是可以的,效果自己试了一下就知道了。