CSS属性缩写整理

属性缩写可以提高代码编辑效率, 也可以减少冗余代码, 是开发过程中不可或缺的部分.

border-width

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

border-radius

border-radius: 1px; // 四个角均1px
border-radius: 1px 2px; // 上左、下右1px 上右、下左2px
border-radius: 1px 2px 3px; // 上左1px 上右、下左2px 下右3px
border-radius: 1px 2px 3px 4px; // 上左1px 上右2px 下右3px 下左1px

background

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

简写:

background: #000 url(images/bg.gif) no-repeat top right;

font

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

简写:

font: italic bold .8em/1.2 Arial, sans-serif;

border

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

简写:

border: 1px solid #000;

margin&padding

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

简写:

margin: 10px 5px 10px 5px;

这里主要借鉴 MDN 上的信息, 感觉总结的不是很全面, CSS3 的属性都没有体现, 等有时间再扩充下 CSS3 的属性缩写部分.

版权属于：行川草庐 - 行川的网络日志

本文链接：https://www.xing-chuan.com/archives/22.html

本作品由行川采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可