欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > div css问集 >

CSS如何合并边框 边框样式代码border简写

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

一、边框样式合成   -   TOP

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

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

可以简写为:

  1. border:1px solid #000 

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

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

可以简写为:

  1. Border-left:1px solid #000 

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

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

可以简写为:

  1. border-right:1px solid #000 

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

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

可以简写为:

  1. border-top:1px solid #000 

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

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

可以简写为:

  1. border-bottom:1px solid #000 

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

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

  1. border-left:1px solid #000; 
  2. border-right:1px solid #000; 
  3. border-top:1px solid #000; 
  4. border-bottom:1px solid #000 

简写为:

  1. border:1px solid #000 

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

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

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

简写为:

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

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

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

简写为:

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

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

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

简写为:

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

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

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

css border简写为:

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

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

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

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

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2013-07-27 14:11 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。