第一章介绍CSS编码技巧在介绍中，作者提到了使用em和inherit来实现CSS代码的简洁性和可维护性。但是根据驱动两年的开发经验，实际开发中很少用到em单位。怎么用，什么时候用，要看实际开发需要。毕竟这两个属性都有一定的局限性。第二章背景与边框半透明边框border:10pxsolidhsla(0,0%,100%,.5);背景：白色；背景剪辑：填充框；background-clip用于在背景渲染区域指定多个边框box-shadowschemebackground:yellowgreen;box-shadow:00010px#655,00015pxdeeppink,02px5px15pxrgba(0,0,0,.6);box-shadow方案的一个缺点是，阴影不占据实际位置。如果有浮动等效果，需要设置相应的内边距来解决这个问题。outlineschemeborder:10pxsolid#655;outline:5pxsoliddeeppink;outline-offset:5px;outline-offsetcontroloffsetbackgroundpositioningbackground-position扩展语法schemebackground:url(example.png)no-repeatbottomright#58a;背景位置：右20px下10px；将背景属性中的背景位置设置为后备方案。background-origin方案用于设置bgposition的基准。默认是padding-box，可以设置为content-box，border-box来改变这个行为。calcschemebackground-position:calc(100%-20px)calc(100%-10px);条纹背景horizo??ntalstripe&verticalstripe&obliquestripe//水平条纹背景:linear-gradient(#fb330%,#58a0);background-size:100%30px;//垂直条纹背景:linear-gradient(90deg,#fb350%,#58a0);background-size:30px100%;//斜条纹背景:repeating-linear-gradient(60deg,#fb3,#fb315px,#58a0,#58a30px);//相同颜色条纹背景：#58a重复线性渐变（30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1)15px,transparent0,transparent30px);这里涉及到一些知识点：如果多个色标的位置相同，会产生一个无限小的过渡区域，颜色如果整个色标中一个色标的位置值小于它前面的色标的位置list，色标的位置会被设置为之前所有位置值中的最大值，所以这里设置0会取之前的最大值。写这个的目的是减少magicstrings的影响。linear-gradient是css生成的图形，作用于background-image属性，位置和大小可以通过background-size来控制。linear-gradient有一个循环版本：repeating-linear-gradient。复杂的背景图片网格&圆点&棋盘格&伪随机背景//Gridwidth:400px;高度：300px；顶部边距：20px；背景：#58a；背景图像：线性渐变（#fff2px，透明0），线性渐变（90deg，#fff2px，透明0），线性渐变（hsla（0、0%、100%、.3）1px，透明0),linear-gradient(90deg,hsla(0,0%,100%,.3)1px,transparent0);背景尺寸：75px75px、75px75px、15px15px、15px15px；//圆点宽度：200px；高度：150px；顶部边距：20px；背景：#655；背景图像：径向渐变（棕褐色30%，透明0），径向渐变（棕褐色30%，透明0）；背景尺寸：30px30px；背景位置：00,15px15px;//棋盘svg解决方案更好width:200px;身高：150px;顶部边距：20px；背景：#eee；背景图片：url('data:image/svg+xml,\\\\');背景尺寸：30px30px；//伪随机背景，使用素数增加伪随机的真实性width:200px;高度：150px；顶部边距：20px；背景：hsl（20、40%、90%）；背景图像：线性渐变（90deg，#fb311px，透明0），线性渐变（90deg，#ab423px，透明0），线性渐变（90deg，#65541px，透明0）；背景大小：41px100%、61px100%、83px100%；连续图像边框border:1emsolidtransparent;背景：线性渐变（白色，白色）填充框，url（example.jpg）边框框0/封面；/*设置样式并启用调整大小*/width:21em;高度：6em；填充：1em；使用background-clips和background-origin属性dottedlinebox&dynamicdottedlinebox.marching{width:21em;高度：6em；保证金：2em自动；填充：1em；边框：1px实心透明；背景：线性渐变（#fff，#fff）填充框，重复线性渐变（-45deg，黑色0，黑色25％，白色0，白色50％）0/.6em.6em;动画：蚂蚁12s线性无限；}@keyframesants{to{background-position:100%}}bordercroppingeffect.footnote{margin:2emauto;border-top:.2emsolidtransparent;border-image:100%00linear-gradient(90deg,currentColor4em,transparent0);}第三个Capshapeellipsewidth:20em;高度：15em；吧ckground:#f50;border:1pxsolid#ddd;border-radius:50%/100%100%00;border-radius可以同时指定水平半径和垂直半径，两组值使用/分离平行四边形.skew{position:relative;文本对齐：居中；宽度：5em；height:1.6em;}.skew::before{content:'';位置：绝对；顶部：0；右：0；底部：0；左：0；z-指数：-1；背景：#58a；transform:skew(45deg);}菱形图片辅助元素的实现.picture{width:400px;变换：旋转（45度）；溢出：隐藏；}.picture>img{最大宽度：100%；transform:rotate(-45degscale(1.42));}图片本身被放大，在不支持的浏览器中可以回退版本。clip-path版本兼容性不好。polygon{clip-path:polygon(50%0,100%50%,50%100%,050%);transition:1sclip-path;}.polygon:hover{clip-path:polygon(00,100%0,100%100%,0100%);}切角效果width:20em;height:15em;margin:2emauto;background:#58a;background:linear-gradient(-45deg,transparent15px,#58a0)right,linear-gradient(45deg,transparent15px,#58a0)left;background-size:50%100%;background-repeat:no-repeat;curvedcornerwidth:20em;height:15em;margin:2emauto;background:#58a;background:radial-gradient(circleattopleft,transparent15px,#58a0)topleft;background-size:50%50%;background-repeat:no-repeat;看完这本书介绍了很多css的实现技巧，而且大部分都是css3的。对于没有兼容性需求的开发，具有很大的参考价值。比如下图中的梯形框和菱形框，可以用CSS3来实现，减少了图片引用的成本，增加了按钮的灵活性。比如我要加点击效果，只需要移动几下就可以了。linecss不加图片（卷）由于基本都是实用技巧，就不一一列举了。建议自己阅读。很好很实用的一本书。（图片来源：斗鱼客户端英雄联盟官方游戏直播间挂件）对于这个小开发来说，这本书更像是一本工具书，可以经常翻阅，温故知新。举一反三？举一反三是不可能的，这辈子也不可能举一反三！
