目标

如何用 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