CSS如何合并边框简写缩写边框样式代码,CSS边框样式代码border简写压缩css优化篇

一、边框样式合成   -   TOP

1、边框各属性独立的样式进行CSS压缩合并

border-color:#000; border-style:solid; border-width:1px 

可以简写为：

border:1px solid #000 

2、左边框各属性独立的合并

border-left-color:#000; border-left-style:solid; border-left-width:1px 

可以简写为：

Border-left:1px solid #000 

3、右边框各属性独立的合并

border-right-color:#000; border-right-style:solid; border-right-width:1px 

可以简写为：

border-right:1px solid #000 

4、上边框各属性独立的合并

border-top-color:#000; border-top-style:solid; border-top-width:1px 

可以简写为：

border-top:1px solid #000 

5、左边框各属性独立的合并

border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px 

可以简写为：

border-bottom:1px solid #000 

二、四边都有边框简写优化   -   TOP

四边相同样式简写实例如下：

border-left:1px solid #000; 
border-right:1px solid #000; 
border-top:1px solid #000; 
border-bottom:1px solid #000 

简写为：

border:1px solid #000 

三、三边有边框，一边无边框简写缩写   -   TOP

1、上、下、左相同边框样式，右边无边框

border-left:1px solid #000; 
border-top:1px solid #000; 
border-bottom:1px solid #000; 

简写为：

border:1px solid #000;border-right:0 

2、上、下、右相同边框样式，左边无边框

border-right:1px solid #000; 
border-top:1px solid #000; 
border-bottom:1px solid #000; 

简写为：

border:1px solid #000;border-left:0 

3、上、右、左相同边框样式，下边无边框

border-left:1px solid #000; 
border-top:1px solid #000; 
border-right:1px solid #000; 

简写为：

border:1px solid #000;border-bottom:0 

4、下、右、左相同边框样式，上边无边框

border-left:1px solid #000; 
border-bottom:1px solid #000; 
border-right:1px solid #000; 

css border简写为：

border:1px solid #000;border-top:0 

这四种情况简写，是根据浏览器读取解释CSS样式时，从左到有规则来做一个技巧性操作。首先设置4边的样式，再设置没有边框的边框样式为0。

DIV CSS边框样式缩写简化总结：
在简化优化缩写边框样式，遇到以上几种情况分别实施优化、合并、简写、利用浏览器读取顺序等将代码进行优化缩写，从而减少CSS代码量。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/wenji/w585.shtml