CSS边框border样式缩写

CSS边框border样式缩写

在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。每个边框有 3 个方面:宽度、样式,以及颜色。

一、边框样式合成 

  •  
  • CSS 代码   复制
  • 
    /*边框各属性独立的样式进行CSS压缩合并*/
    border-color:#000; border-style:solid; border-width:1px  
    
    /*可以简写为:*/
    border:1px solid #000  
    
    /*左边框各属性独立的合并*/
    border-left-color:#000; border-left-style:solid; border-left-width:1px  
    
    /*可以简写为*/
    border-left:1px solid #000 
    					

     

  •      

    二、三边有边框,一边无边框简写缩写

  •  
  • CSS 代码   复制
  • 
    /*上、下、左相同边框样式,右边无边框*/
    border-left:1px solid #000; 
    border-top:1px solid #000;
    border-bottom:1px solid #000;  
    
    /*简写为:*/
    border:1px solid #000;border-right:0 
    			

     

  •     

    三、附带列出边框border的其它属性

         

    属性 描述
    border 简写属性,用于把针对四个边的属性设置在一个声明。
    border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
    border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
    border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
    border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
    border-bottom-color 设置元素的下边框的颜色。
    border-bottom-style 设置元素的下边框的样式。
    border-bottom-width 设置元素的下边框的宽度。
    border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
    border-left-color 设置元素的左边框的颜色。
    border-left-style 设置元素的左边框的样式。
    border-left-width 设置元素的左边框的宽度。
    border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
    border-right-color 设置元素的右边框的颜色。
    border-right-style 设置元素的右边框的样式。
    border-right-width 设置元素的右边框的宽度。
    border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
    border-top-color 设置元素的上边框的颜色。
    border-top-style 设置元素的上边框的样式。
    border-top-width 设置元素的上边框的宽度。