CSS深入

padding：垂直属性不会影响元素位置，但是会影响background-color，可以利用这一特点来做一下效果：


    
    
    


    注册退出登录

注册 | 退出登录

border：

border-width:不支持百分比，但是支持thin(1px),medium(3px),thick(5px)--不支持ie7，

默认值：3px，？？？为什么默认3px而不是1px,明明1px和很常用，那是因为border_style:double至少3px才有效果。。。

border-style:

solid

dashed虚线：chrome和Firefox是3：1，看着比较稀疏；IE是2：1看着比较密集

dotted：chrome和Firefox是小方块；IE是小圆点(CSS可以实现圆角)

double：（兼容性很好）

计算规则：1px:0+1+0,2px:1+0+1,3px:1+1+1,4px:1+2+1,5px:2+1+2,6px:2+2+2,7px:2+3+2

规律：双线宽度永远相等，中间间隔+-1

例：三道杠效果

inset:内凹（基本不用）

border-color：

当没有指定border-color的时候，会使用color作为边框色

background：

background-position:

background-position：50px 40px;

background-position是相对于左上方定位的

如何相对于右边定位：用border，给右边一个厚的透明边框，100%右侧定位不计算border区域

border-right:50px solid transparent;

background-position:100% 40px;

 

border与三角形等图形构建：

利用border属性的border-width,border-style,border-color。

上下左右边框其实是梯形

结果：

只要缩小当前div的宽高到0，把相关的上下边框颜色变为transparent即可实现三角形，改变border-width的X,Y的值即可改变三角形形状

用border模拟圆角：（兼容性好）

上下两个梯形加中间的长方体

 

 

border的透明边框：（使用很广）始于IE7足够兼容