一只苹果风格的轮播
这是一个苹果风格的demo，乍一看，干净清爽，如果不乍一看的话 …… 会发现不少细节非常细致巧妙 ……
一直以来我也没怎么在意背景图片，这个 demo 让我深刻地见识到了，原来用背景图片可以简单地实现用基本 css 不容易实现的样式。
如果我们懂得一些轮播的原理，那么这个 demo 的技术难点都集中在导航栏：
Screen Shot 2019-06-27 at 12.54.13 AM.png
1.主图片的下阴影与下菜单按钮的共用；
2.主图片的下阴影是弧形的；
3.增加按钮立体感的左右按钮；
4.活动状态的按钮有个三角形与主图片联系到了一块；
通过阅读作者的代码，我惊讶地发现，以上这些样式，统统是通过背景图片实现的，图片的优点也明显，可以更简单干脆地实现 css 代码可能挺费劲才能达到的样式：
对于我自己来说，我真正关心的问题是，作者用图片实现的样式，我能不能不用图片，只用 css 完成呢？
事实证明，是可以的，花了写时间搞清楚了作者的思路，我就开始有了思路：
一、菜单栏背景渐变，并且主图片的弧形的下阴影与菜单栏共用；
值得注意的是，则是一个有点弧度的 shadow，解决的方法重新创造一个有点弧度的 element，那它的 shadow 来用，而把它本身隐藏起来就可以了
实际做法：
1.在菜单栏中创造一个椭圆 element(.roundShadow)，给菜单栏设置 overflow: hidden，生成 shadow 后再调节 shadow 的位置就可以了；
.menu .roundShadow {
position: absolute;
width: 920px;
height: 2px;
top : -5px;
border-radius: 50%;
box-shadow: 0 3px 4px 1px #e0e0e0;
z-index: 0;}
2.设置了弧形阴影后，两边有些空白，于是再加入一个直线“阴影”(.lineShadow)：
.menu .lineShadow {
position: absolute;
top: 0;
left: 0;
width: 920px;
height: 0;
border-bottom:
1px solid #e0e0e0}
3.考虑到菜单栏有渐变效果，一块做了：
.menu {
linear-gradient(#ffffff, #ececec);
...
}
Done！
二、增加按钮立体感的左右按钮；
按照作者背景选图的思路，立体按钮的效果就是通过在每个按钮右边加入一列占1像素的灰色以及一列白色。
于是，我们通过内阴影就可以达到一样的效果：
.menu button {
box-shadow: inset -1px 0 #fefefe, inset -2px 0 #dddddd;
}
然后我们在单独给第一个按钮加一个左边内阴影就可以了！
三、活动状态的按钮有个三角形与主图片联系到了一块；
这一部分的难度稍低一些，
1.碰到三角形的话，常规思路就是加上一个 ::after，
.menu button.active::after {
content: "";
position:absolute;
left:50%;
transform: translateX(-50%);
top: -2px;
border: 7px solid transparent;
border-top-color: #ffffff;
z-index: 2;
}
1.环形背景用 radial-gradient 就可以了：
main .menu button.active {
background: radial-gradient(farthest-corner,#f0f0f0, #bbbbbb);
}
哈哈，完成，看起来也像模像样的
