学习要注重基础，注重底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。交流，不应该仅仅停留在技术方面，更多的应该是在思维方式。语言只是一种工具，编程的思想才是核心。我们只有在明白了编程的思想之后，才能去创造属于自己的东西，随意切换。授之以鱼不如授之以渔。在我们的时代应该是去创造而不是模仿。回到学校之后，我开始我学习的新旅程；读一本好书亦如交一个有趣的朋友。最近读了一本《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,outline

box-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（描边）属性来产生内外层边框；例如我们常见的：

outline

outline: 是用来设置一个或多个单独的轮廓属性的简写属性 ， 例如 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;

效果图如下所示：

渐变是可以和背景图片一起使用的，而且背景图片的预发和平时的写法是一样的。而且写在前面的优先级会比较高，会盖在后面的图片上面