首先搭建结构。按钮整体用一个盒子div承载，设置类名为btns，每个按钮用a标签。弥散阴影和小箭头我们使用伪元素:before和:after去制作。
书写css样式，实体化a标签作为按钮，添加渐变背景色。
弥散阴影使用伪元素:before实体化定位制作，注意背景颜色继承父元素，层级设置为-1在按钮的下方，添加filter:blur(5px)滤镜属性设置投影为高斯模糊并且调整定位坐标向下。
样式书写完毕，按钮的静态效果已经实现，如下图所示。
添加鼠标移上小箭头出现移动效果。
小箭头我们使用伪元素:after去制作。设置小箭头默认透明度opacity:0，鼠标移上设置透明度为1，显示小箭头，注意添加transition过渡会有淡入显示视觉效果。
鼠标移上a设置:after添加animation动画控制水平位移transform:translateX()。
添加小箭头后，鼠标移上效果如下图。
添加线框滑动效果。这个效果需要在a标签内部添加四个span定位并实体化，背景颜色继承父元素，层级z-index设置为-1在按钮的下方，并且给线框设置四个不同方向的位移，把线框移动到按钮外面。
线框实体化后效果如下图。
设置线框初始不透明度为0，鼠标移上按钮a，把线框位移回原来的位置transform:translate(0,0)，并且把不透明的设置为1，添加过渡效果transition。
最终效果如下图。
在前几天接到一个需求是要给后台管理系统加上文字水印的功能，使用了一个water-mark-oc的第三方插件的实现，然后去看里面的源码究竟是怎么实现这个水印功能的，当时就很好奇为何在页面z轴最上层增加了一个层却完全不会影响下面元素的任何事件响应，简直是前端黑科技，后来发现里面使用了一个的css属性：pointer-events：none，
看上去确实很神奇，以为会是事件冒泡代理转发之类的很难懂的概念。实际上超级简单，对某一个元素比如div采用div{pointer-events:none}即可让这个HTML元素（包括它的所有子孙元素）失去所有的事件响应。鼠标焦点会直接无视它，click、mouseover等所有事件会穿透它到达它的下一级元素.
pointer-events:none的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。
如果这个css3属性浏览器不支持可以通过用js来扩展
实际运用：
https://www.zhangxinxu.com/study/201112/pointer-events-none.html
实现幻影功能
https://www.zhangxinxu.com/study/201112/pointer-events-a-button-disabled.html 实现a标签按钮完全禁用
总结:如果你在一个页面，有个最高的层级覆盖其他层级，但是有不影响其他层级的事件的话，那pointer-events:none这个属性就非常适合你
原文参考: https://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/
1 .css中box-sizing默认是content-box，所以添加padding会增加盒子的尺寸2 .内联元素的padding不仅会影响水平方向，也会影响垂直方向。在水平方向上来看，会算到他的宽度里面，在流里面占据位置，影响下一个元素的位置。在垂直方向上来看，添加padding，不会影响下方元素的布局，仅仅会做重叠。
1 .relative元素的定位。影响外部尺寸，padding。给父元素添加overflow:auto。如果超出之后是会有滚动标志出来的
2 .outline,盒阴影box-shadow。单纯视觉层叠，不会影响外部尺寸
1 .不影响当前布局的情况下，增大a标签的点击区域大小.默认情况下,a标签连接的点击高度是受font-size影响的和line-height没有关系。这种高度在移动端更是小，如果想要增大点击面积，需要使用如下样式
2 .做一个分隔符
1 .不支持负值
2 .支持百分比，但是！！！padding的百分比无论是横向还是垂直方向，都是相对于自己的宽度计算的.如果是根据高度height计算的话，大部分height都是0，没啥意义。还不如相对于宽度计算，因为css默认的是水平流，计算值一定会有效
应用：实现一个宽高比为5:1的固定头图效果:以为B站的顶图是这样的，原来不是.发现一个不一样的，他的height：0.935vw
1 .内联元素的padding是会断行的，内联元素的padding是跟着内联盒模型中的行框盒子走的。如果一行文字显示不下，去下一行，padding也会跟着下去，此时的padding就会覆盖上一行的元素
2 .同时内联元素的padding会让幽灵空白节点出现.可以看出不是一个纯正方形
1 .ou,ul内置padding-left，单位是px。如果列表中的font-size大小很小，li元素的项目符号就会和ul,ol的左边缘距离很大.如果font-size很大，就会从左边超出去。视觉要求很高的话，可以用计数器。padding-inline-start: 40pxul的这个属性决定距离的大小。实测变小问题不大，感觉变大问题大一些
2 .表单内置的padding
3 .最难控制的button按钮：主要是一般没有这样操作的。用label完全表现button，但是这个要传id啊。还是要看下库是怎么实现的
4 .
1 .outline属性在一个声明中设置所有轮廓属性。但是输入框focus的时候特别的突出
2 .轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
3 .廓线不会占据空间，也不一定是矩形.看起来像是一个很通用的属性
4 .轮廓与 边框 不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响
1 .padding属性和background-clip属性。主要使用这俩
2 .图形1：实现一个菜单icon
2 .图形2：实现一个圆环
