第一章 引言
css编码技巧
在引言中，作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看，在实际开发中很少来使用em这个单位。如何用以及何时去使用，还是要根据实际开发需求来定吧，毕竟这两个属性都有一定的局限性。
第二章 背景与边框
半透明边框
border: 10px solid hsla(0, 0%, 100%, .5);
background: white;
background-clip: padding-box;background-clip用来指定背景渲染区域
多重边框
box-shadow方案
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0, 0, 0, .6);box-shadow方案有一个缺点就是，shadow不占实际位置，如果有悬浮之类的效果，需要设置相应的内边距来解决这个问题。
outline方案
border: 10px solid #655;
outline: 5px solid deeppink;
outline-offset: 5px;outline-offset控制偏移
背景定位
background-position扩展语法方案
background: url(example.png) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;在background属性里面设置背景位置做回退方案
background-origin方案
background-origin用来设定bgposition的基准，默认以padding-box为准，可以将它设置为content-box、border-box来改变这一行为。
calc方案
background-position: calc(100% - 20px) calc(100% - 10px);条纹背景
水平条纹&垂直条纹&斜条纹
// 水平条纹
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;
// 垂直条纹
background: linear-gradient(90deg, #fb3 50%, #58a 0);
background-size: 30px 100%;
// 斜条纹
background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);
// 同色系条纹
background: #58a
repeating-linear-gradient(30deg,
hsla(0, 0%, 100%, .1),
hsla(0, 0%, 100%, .1) 15px,
transparent 0,
transparent 30px
);这里面涉及一些知识点：
- 如果多个色标具有相同的位置，他们会产生一个无限小的过渡区域，颜色会突变
- 如果某个色标的位置值比整个列表中在它之前的色标位置都要小，则色标的位置会被设置为前面所有位置值的最大值，所以这里设置0会取前面的最大值。这么写的目的是减小魔法字符串的影响。
- linear-gradient是css生成的图形，作用于background-image属性，可以通过background-size来控制位置及大小。
- linear-gradient有一个循环版：repeating-linear-gradient。
复杂的背景图
网格&波点&棋盘&伪随机背景
// 网格
width: 400px;
height: 300px;
margin-top: 20px;
background: #58a;
background-image:
linear-gradient(#fff 2px, transparent 0),
linear-gradient(90deg, #fff 2px, transparent 0),
linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
// 波点
width: 200px;
height: 150px;
margin-top: 20px;
background: #655;
background-image:
radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
// 棋盘svg方案更优
width: 200px;
height: 150px;
margin-top: 20px;
background: #eee;
background-image: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="100" height="100" \
fill-opacity=".25">\
<rect x="50" width="50" height="50" /> \
<rect y="50" width="50" height="50" /> \
</svg>');
background-size: 30px 30px;
// 伪随机背景，使用质数增加伪随机的真实性
width: 200px;
height: 150px;
margin-top: 20px;
background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 41px, transparent 0);
background-size: 41px 100%, 61px 100%, 83px 100%;连续的图像边框
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box,
url(example.jpg) border-box 0 / cover;
/* Styling & enable resize */
width: 21em;
height: 6em;
padding: 1em;运用background-clips和background-origin属性
虚线框&动态虚线框
.marching {
width: 21em;
height: 6em;
margin: 2em auto;
padding: 1em;
border: 1px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0 / .6em .6em;
animation: ants 12s linear infinite;
}
@keyframes ants { to {background-position: 100%} }边框裁剪效果
.footnote {
margin: 2em auto;
border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg, currentColor 4em, transparent 0);
}第三章 形状
椭圆
width: 20em;
height: 15em;
background: #f50;
border: 1px solid #ddd;
border-radius: 50% / 100% 100% 0 0;border-radius可以同时指定水平半径和垂直半径，两组值使用/隔开
平行四边形
.skew {
position: relative;
text-align: center;
width: 5em;
height: 1.6em;
}
.skew::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #58a;
transform: skew(45deg);
}菱形图片
辅助元素实现
.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg scale(1.42));
}图片本身放大，在不支持的浏览器里面可以做到版本回退
clip-path版本兼容性不好
.polygon {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: 1s clip-path;
}
.polygon:hover {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}切角效果
width: 20em;
height: 15em;
margin: 2em auto;
background: #58a;
background:
linear-gradient(-45deg, transparent 15px, #58a 0) right,
linear-gradient(45deg, transparent 15px, #58a 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;弧形切角
width: 20em;
height: 15em;
margin: 2em auto;
background: #58a;
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left;
background-size: 50% 50%;
background-repeat: no-repeat;
读后感
这本书介绍了大量的css实现技巧，并且以css3偏多，对于兼容性无要求开发来说，有很大的借鉴价值，比如下图这些梯形框，菱形框，就可以使用css3来实现，减少图片引用成本，并可以增加按钮的灵活性，比如我想加一个点击效果，就只需要动几行css，而无需再加图片（体积）。由于基本都是一些实用性的技巧，我就不一一列举了，建议自读。很好很实用的一本书。
（图片来源：斗鱼客户端英雄联盟官方赛事直播间挂件）
这本书对于本小开发来说，更多像一本工具类书籍，可以经常翻阅查询，温故知新。举一反三？举一反三是不可能举一反三的，这辈子都不可能举一反三！
