CSS边框border

基础样式

  边框是一条以空格分隔的集合样式，包括边框粗细(边框宽度)、边框颜色和边框样式，且先后顺序无关

    border: border-width border-color border-style
    border: 1px solid red;

【边框样式】

  如果一个边框没有样式，边框将根本不会存在

  关于虚线dashed，在chrome/firefox下，虚线宽高比是3/1；而在IE下，虚线宽高比为2/1。所以在IE下虚线显得比较密

  关于点线dotted，在chrome下，点线是方点；而在IE/firefox下，点线是圆点

border-style:none(默认)
border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9种)

【边框宽度】

  边框的宽度不能为负，不能指定为百分比值。这是因为，边框并不会因为设备尺寸变大，所以百分比单位并不符合语义。类似地，还有outline、box-shadow、text-shadow等

  边框宽度支持3个关键字：this/medium/thick，分别是1px、3px、5px，且medium为默认值。medium为3px是因为边框样式double至少为3px为有效果

    border-width: thin/medium(默认)/thick/<length>

【边框颜色】

  默认的边框颜色是元素本身的前景色，即元素的文本颜色；如果元素没有任何文本，则边框颜色是其父元素的文本颜色。但是，在表格中，若只设置border-style，而不设置border,则边框颜色为黑色，而不与文本颜色相同。类似地，还有text-shadow、box-shadow等

    border-color: transparent/<color>

边框要点

【注意事项】

  边框有以下几个要点需要特别注意：

  1、边框绘制在元素背景之上，如果边框样式有某种缝隙，可以通过这些缝隙看到元素的背景(有兼容问题)

  2、同一元素的边框相交处是斜线，可以用边框实现三角形

  3、行内元素的上下边框由于不影响行高，不影响布局；左右边框会影响布局

  4、在CSS2.1中，背景定位background-position只能相对于左上角定位。如果需要是相对于右侧，则可以使用一个右侧的透明边框来实现类似的效果

【边框单边】

        border-top/border-right/border-bottom/border-left

【边框属性】【四值顺序】

    border-width: 1px 2px 3px 4px;//上右下左
    border-width: 1px 2px 3px;//上(左右)下
    border-width: 1px 2px;//(上下)(左右)
    border-width: 1px;//(上下左右)

圆角边框

  圆角边框border-radius可以为边框设置圆角(IE8-不支持)，四值顺序是左上、右上、右下、左下

border-radius: none(默认)
border-radius: <length>{1,4}[/<length>{1,4}]?
//如果反斜杠存在，前面的值是水平方向的半径，后面的值是垂直方向的半径。如果没有则水平和垂直方向相等

  关于圆角边框有如下注意事项：

  1、<length>可以是具体值，也可以是百分比，但不是负数

  2、重置border-radius没有圆角，使用none无效，需要取值0

  3、border-radius对<img>没有任何效果

  4、如果取值为百分比，水平方向圆角百分比相对于宽度，垂直方向圆角百分比相对于高度

【圆角单角】

border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radius
border-top-left-radius: 10px 20px;

  [注意]写圆角单角时不可加/

【四值顺序】

  四值顺序是左上、右上、右下、左下

border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;

【内径外径】

  border-radius内径 = 外径 - 对应的边框宽度

  当border-radius半径值小于等于边框宽度时，元素没有内径效果

【特殊图形】

圆形

  元素的宽高相同，且圆角半径为宽高的一半

div{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

半圆

  元素宽高不同，且圆角半径与宽高要配合

div{
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
}