CSS tips（持续更新...）

• 处理文字溢出省略号代替：

p{
    overflow: hidden;
    text-overflow: eliipsis;
    white-space: no-wrap;
}

• 使用box-shadow，制作四周阴影：

.box{
    box-shadow: 0px .5px 10px black;
}

• 移动端viewport “三件套” ：

• 让元素的宽度、高度包含 padding 和 border：

box-sizing: border-box;

• 字体的抗锯齿，更圆润了：

-webkit-font-smoothing: antialiased;

• 画一个三角形，已是经典了：

div {
    border-bottom: 10px solid white;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    height: 0px; 
    width: 0px; 
}

• 去除 iOS 下 标签自带的老土样式：

input{
    -webkit-appearance: none;
    outline: none;
    border: 0;
}

• 去除 chrome 中 标签自动填充表单时的输入框背景色：

input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    border: 1px solid #ffffff;
}

• 为黑色文字描白色边：

p{
    color: #000;
    text-shadow:  1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

• 横向滚动：

祖父元素宽度固定，内容溢出以滚动处理
.grad{
    width: 500px;
    overflow: scroll;
}
父元素宽度不固定，不换行
.parent{
    white-space: nowrap;
}
子元素同行排列
.son{
    display: inline-block;
    width: 200px;
}