border深入学习笔记

border-style属性设置一个元素的四个边框的样式。此属性可以有一到四个值。

实例:

border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线

double的妙用

• 绘制菜单图形

<div class="a"></div>
.a{
width:40px; height: 6px;
border-top:18px double;
border-bottom:6px solid;
}

border-color

不设置默认为文本颜色 使用hover 改变字体颜色boder 也同样变化

background-position

background-position是相对于左上角，且不把border计算在内，
因此，可以用border-right设置成想要元素距右多远的值，再设为透明，然后再设置background-position。
例如:border-right:1px solid transparent;background-position:100% 40px;