记录一个使用border图形效果的综合运用

记录一个小应用，我在开发中也经常碰到的，很多的小细节。先上一个效果图。

看起来就是常见的网页菜单运用。这里要说明的是，两边的小红色三角形，也是用css来写的。

原理也简单，只是以前没用过，设置一个宽高都为0像素的标签，但是有border，如果将各个边的border设置成不同的颜色，可能会出现如下的现象。

比如上图就是一个上下border为黑色，左右border为红色的标签，样式为：width:0; height:0;border:20px solid black; border-left-color:red; border-right-color:red;

理解了这个，左边的小红三角就好做了，整个border为白色，左边的border为红色就可以了。这是第一个技巧，具体样式为：

1
2
3
4
5
6
7
8
9
10
11
12
13

.bor{
    width:0;
    height:0;
    border:8px solid #fff;    
    display: block;
    position: absolute;
    top:7px;
    overflow: hidden;
}
.wrap a:hover .bor-left{
    border-left-color:red;
    left:5px;
}

对于两个三角，采用了绝对定位。

这里记录下另外一个小技巧，也是开发中常常遇到的。

在给一个标签加hover样式的时候，如果hover时加了边框，会出现轻微的抖动的现象，这是因为加了边框后，原有标签所占的空间增大，挤到了相邻的标签。

为了预防这种抖动，可以对hover前的标签加白色边框，这样在hover的时候，只需要改变边框的颜色，而不会改变边框的大小，这样就不会产生抖动的现象了。

转载的地址