学习要注重基础，注重底层实现原理。才气在日新月异的技术行业站住脚跟，以稳定应万变，万丈高楼平地起，所以我们应该不停的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是焦点。

我们只有在明确了编程的思想之后，才气去缔造属于自己的工具，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去缔造而不是模拟。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋侪。

最近读了一本《CSS揭秘》，内里有许多有意思的CSS技巧，有时间有兴趣的朋侪可以去读读这本书，读完之后我们可以一起交流，学习，一起解答你我的疑惑知识点，期待和你的交流。读完这本书的时候我也对书中的知识点举行了总结归纳：css编码技巧只管淘汰代码重复的重复，只管淘汰改动时要编辑的地方，易维护，性能高；使用css变量，currentColor,inherit...现在css变量很少，兼容性有待改善响应式网页设计，每个媒体查询都市增加成本；制止媒体查询使用百分比长度来取代牢固长度,或者使用与视口相关的单元（vw,vh,vmin,vmax)，她们的值剖析为视口宽度或高度的百分比；你需要在较大分辨率下获得牢固宽度， 使用max-width取代width，因为他可以适应较小的分辨率，而无需使用媒体查询替换元素（img,object,video,iframe)设置一个max-width值为100%；图片元素以行列式举行结构时，让视口的宽度来决议列的数量，弹性和结构（flexbox，display：inline-block）；.使用多列文本时，指定column-width（列宽）而不是指定column-count（列数），目的他就可以在较小的屏幕上自动显示单列结构合理使用简写. 合理使用简写，是一种良好的防卫性编码方式，可以抵御未来的风险；css小技巧为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简朴。

简朴就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验；DOM操作比起非DOM交互需要更多的内存和CPU时间；一连实验举行多次的DOM相关操作可能会导致浏览器挂起，有时会瓦解；1. 半透明边框实现半透明边框可以有许多的实现方法，好比：伪元素和定位相联合，多层div包裹和定位相联合...,一千个读者就有一千个哈利波特，每小我私家都有一套自己的实现方法，或许那都不是最优的；问题：代码量有点多，不切合我前面说的css编程技巧，在实际中会泛起种种我们想象不到的bug；解决：使用配景的事情原理，配景与边框的关系；background-clip:设置元素的配景（配景图片或者颜色)是否延伸到边框下面；重点在切割的位置border-box:默认情况，配景延伸到边框外延(可是在边框之下)padding-box: 边框下面没有配景，即配景延伸到内边距外延content-box: 配景裁剪到内容去外延自己动手敲的实现的效果图如下：半透明边框2. 灵活配景定位有时候我们希望图片和容器的边角之间能留出一定的清闲，类似padding的效果，对于牢固尺寸巨细的容器来说我们可以使用 background-position 实现，可是内容往往是不牢固？background-position的值和padding一致也可实现，可是每次修改都要三个地方，代码不够DRY解决：background-origin calc()；background-origin: 划定了指定配景图片background-image 属性的原点位置的配景相对区域,重点在background-position位置的源点border-box: 配景将会延伸到延伸到外界限的边框，而且是「边框在上、配景在下」，这个用border-style 为dashed可以直接看得出来padding-box:默认情况配景描绘在padding盒子，边框里不会有配景泛起。同样，配景将会延伸到最外界限的padding.content-box:配景描绘在内容区规模.calc()自己动手敲的实现的效果图如下：3. 多重边框你还在用多个元素层层包裹来模拟多重边框吗？不，我在用伪元素实现，哈哈。可是她们都需要我们添加分外的元素，或者大量的代码来污染我们的结构；解决方案：box-shadow,outlinebox-shadow: 向框添加一个或多个阴影;inset : 默认阴影在边框外。

使用inset后，阴影在边框内（纵然是透明边框），配景之上内容之下。offset-x,offset-y : 这是头两个 length 值，用来设置阴影偏移量。offset-x 设置水平偏移量，如果是负值则阴影位于元素左边。

offset-y 设置垂直偏移量，如果是负值则阴影位于元素上面。可用单元请检察 length。

如果两者都是0，那么阴影位于元素后面。这时如果设置了 blur-radius 或 spread-radius 则有模糊效果。blur-radius : 这是第三个 length 值。

值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。

spread-radius : 这是第四个 length 值。取正值时，阴影扩大；取负值时，阴影.收缩。默认为0，此时阴影与元素同样大。

color：边框的 color。如果没有指定，则由浏览器决议——通常是color的值，不外现在Safari取透明。

box-shadow如果你只需要两层，那就可以设置一层通例的边框，再加上outline（描边）属性来发生内外层边框；例如我们常见的：outlineoutline: 是用来设置一个或多个单独的轮廓属性的简写属性 ， 例如 outline-style, outline-width 和 outline-color;轮廓不占据空间，它们被描绘于内容之上outline-offset: 一个元素边缘或边框之间的间隙;4. 边框内圆角有时候我们需要一个容器，只有内侧有圆角，边框或者描边的四个角在外部仍然保持直角形状解决方案：box-shadow和outline联合实现原理： outline（描边）不会随着元素的圆角走（因而显示直角）；box-shadow却是会随着元素走的；，两者相联合，box-shadow会填补描边和容器圆角之间的清闲；5. 一连的图像边框有时候我们想把一副图案应用为边框，而不是配景？你或许会想到border-image，可是行不通，border-image他的原理基本上就是九宫格伸缩法，把图片切割成九块，然后把她们应用到元素边框相应的边和角border-image的事情原理：解决方案：css渐变和配景的扩展，在配景图之上在加一层纯色实色配景，给两层配景指定差别的background-clip;效果图如下所示：渐变是可以和配景图片一起使用的，而且配景图片的预发宁静时的写法是一样的。而且写在前面的优先级会比力高，会盖在后面的图片上面。

本文来源：皇冠官网地址-www.fujifilmcollective.com