CSS揭秘 第一章 引言

浏览器前缀

• Firefox的-moz-
• IE的-ms-
• Opera的-o-
• Safari和Chrome的-webkit-

CSS编码技巧

.button{
    width: 150px;
    height: 60px;
    margin: 50px auto;
    border: 1px solid #446d88;
    text-align: center;
    line-height: 60px;
    color:white;
    border-radius: 4px;
    background: #58a linear-gradient(#77a0bb,#58a);
    box-shadow: 0 1px 5px gray;
    text-shadow: 0 -1px 1px #335166;
}

1.代码可维护性：尽量减少改动时要编辑的地方

换成em相对值，百分比，倍数

.button{
    width: 9.375em;
    height: 3.75em;
    margin: 3.125em auto;
    border: 1px solid #446d88;
    text-align: center;
    color:white;
    border-radius:.25em;
    background: #58a linear-gradient(#77a0bb,#58a);
    line-height: 3.75em;
    box-shadow: 0 .0625em .3125em gray;
    text-shadow: 0 .0625em .0625em #335166;
}

2.灵活：容易扩展，极少代码可以扩展出不同的变体
换颜色：用通用样式，主色调+辅助层（亮色+暗色）
换阴影：非白背景下，做通用的阴影
换尺寸：边框1px不变，其他的变

（1）推荐使用HSLA产生半透明的白色，更短更快

background: #58a linear-gradient(hsla(0,100%,100%,.2),transparent);

（2）只需覆盖背景颜色

.button .cancel {
    background-color: #c00;
}
.button .ok{
    background-color: #6b0;
}