目标
如何用 css 解决难题
收获
尽量减少代码重复
1
用相对值
font-size: 20px;
line-height: 30px;
// 应该改成
font-size: 20px;
line-height: 1.5;相对值很多 em 和 百分比
2
假设有个按钮 bg 颜色是 colorsA，让 bg 变亮或变暗，可以把半透明的黑色和白色叠加到上面。这样 bg 可随时换都能达到变亮或变暗的目的。
background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent)less做法是通过 lighten 或者 darken 设置一个值
darken(#428bca, 6.5%)3
代码容易维护和代码量少不可兼得。
// 代码量少，但可读性可维护上差
border-width: 10px 10px 10px 0;
// 可读性可维护上好很多
border-width: 10px;
border-left-width: 0;
合理使用简写
前者是简写，可以确保背景是 red。但如果是用展开式的单个属性，那背景可能是一个渐变团，一张毛的图片或者其他任意东西。
background: red;
background-color: red;合理使用简写是一种良好的防卫性编码方式，可以抵御未来的风险。
calc
calc 的 + - 两侧需要有空格
calc(100% - 10px); calc(100% + 10px)连续的图像边框
1
2
椭圆
1
border 可以单独指定水平和垂直半径
border-radius: 100px / 75px;
2
4分之一椭圆
border-radius: 100% 0 0 0;
平行四边形
1
2
z-index: -1; 的使用很经典
切角
background: linear-gradient(-45deg, transparent 15px, #58a 0);
想加个角标，达到这个效果，需要再来一个linear-gradient，同时给不同的linear-gradient 分配不同的 background-size。
background:
linear-gradient(to top left, transparent 50%, rgba(0,0,0,.4) 0) 100% 100% no-repeat,
linear-gradient(-45deg, transparent 20px, #58a 0);
background-size: 2em 2em, auto;投影
普遍认识的投影是
box-shadow: 2px 3px 4px black;这让大家误解不能对单边 box-shadow。因为鲜为人知的 第四个长度参数
box-shadow: 0px 3px 4px -4px black;
双层投影
box-shadow: 5px 0 5px -5px black, -5px 0px 5px -5px black;
毛玻璃效果
见 毛玻璃
自定义复选框
不多介绍，weui 也有相关案例 weui 复选框
滚动提示
现在越来越多的移动端都是这样处理，滚动提示
其他
《css揭秘》对应的github地址 https://github.com/cssmagic/C...
demo http://play.csssecrets.io/
图灵图书在封底都提供优惠码低价购买电子书
她github https://github.com/LeaVerou
