css属性作用总结

1.边框样式

border-style : none | hidden | dotted | dashed | solid | double | groove |
              ridge | inset  | outset 

例：

div { width:300px; height:100px; border-style:solid; ｝

border-top-style     设置上边框线

border-bottom-style     设置下边框线

border-left-style     设置左边框线

border-right-style     设置右边框线

2.边框宽度

border-width : medium | thin | thick | length         

例：    
        
div { width:300px; height:100px; border-style:solid; border-width:1px; ｝


border-top-width         设置上边框宽度

border-bottom-width     设置下边框宽度

border-left-width         设置左边框宽度

border-right-width         设置右边框宽度

3.边框颜色

border-color : color         

例：div { 
width:300px; 
height:100px; 
border-style:solid; 
border-width:1px; 
border-color:#FF0000; 
}

border-top-color         设置上边框颜色

border-bottom-color     设置下边框颜色

border-left-color         设置左边框颜色

border-right-color         设置右边框颜色        

4.边框样式缩写

border : border-width || border-style || border-color         

例：
div { 
    width:300px; 
    height:100px; 
    border-style:solid; 
    border-width:1px; 
    border-color:#FF0000; 
}

缩写后：
div {
    width:300px; 
    height:100px; 
    border:1px solid #FF0000;
}

5.圆角效果

border-radius : [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
向元素添加圆角边框。

例子：
/* 所有角都使用半径为10px的圆角 */ 
div{ border-radius:10px;}  

/* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 
div{ border-radius: 5px 4px 3px 2px; }
    
/*也可以分别设置每个角的垂直半径和水平半径,用斜杠隔开，第一个参数表示左上角开始顺时针的水平半径，第二个参数表示左上角开始顺时针的垂直半径*/
div{ border-radius: 10px 20px 30px 40px  /  5px 10px 15px 20px; }

/*圆*/
div{ border-radius:50% }