属性缩写可以提高代码编辑效率, 也可以减少冗余代码, 是开发过程中不可或缺的部分.
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 国际许可协议进行许可