CSS打造下拉菜单的小箭头(border-color的利用)

昨天学会了怎么用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可以有四个颜色值,他们分别对应上,右,下、左三个角。以前都只有见到只有一个值的,那就是整个的都是这个颜色,你还可以只写三个值,或者两个值都是可以的,效果自己试了一下就知道了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注