小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
有趣的前端css特效-苹果数据线
今天在某网站溜达的时候发现一个看似平平无奇的图片。就是下面这个。
果然是 '平平无奇' 古天乐，看似一张普普通通的苹果数据线高清照片，没想到背后居然大有玄机（整个结构全部是由css完成，无任何图片）
1. 首先是这个长三段的乳白色胶线部分
全长三段，可分解为三段长短高度不一致的长方形，两两交界处的阴影再分解成一个小的长方形 通过background-image ：linear-gradient 线性渐变，将长方形从下至上、从左到右分别填充灰白色，来模拟出数据线的本身颜色以及光影效果。
background-image:
linear-gradient(to bottom,#ddd,#f7f7f7 13%,white 18%,white 35%,#f7f7f7 38%,#f7f7f7 50%,#eee 70%,#ddd 85%,#ccc 95%,#bbb 100%),
linear-gradient(to left,rgba(0,0,0,0.1),rgba(0,0,0,0)),
linear-gradient(to bottom,#ccc,#ddd 10%,#edf0f3 30%,#edf0f3 60%,#ccc 92%,#bbb 98%),
linear-gradient(to left,rgba(0,0,0,0.1),rgba(0,0,0,0)),
linear-gradient(to bottom,#ccc,#ddd 10%,#edf0f3 30%,#edf0f3 60%,#ccc 95%,#bbb 100%);
复制代码通过background-size 设置三段式的大小
background-size: 11em 6.2em,1em 3.2em,8em 3.2em,.8em 2.3em,calc(50% - 4em) 2.3em;
复制代码使用background-position 设置三段式的定位
background-position: calc(50% + 9.5em) 50%,calc(50% + 3.5em) 50%,50% 50%,calc(50% - 4.4em) 50%,0 50%;
复制代码如此数据线的线部分就完成了。 下面来拼接数据线的接口部分
首先还是使用background-image来描绘接口部分的颜色
background-image:
linear-gradient(to bottom,white 30%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0) 90%),
linear-gradient(to top,white 30%,rgba(0,0,0,0.2) 30%,rgba(0,0,0,0) 90%),
linear-gradient(to bottom,rgba(0,0,0,0.15),rgba(0,0,0,0)),
linear-gradient(to top,rgba(0,0,0,0.15),rgba(0,0,0,0)),
linear-gradient(to right,rgba(0,0,0,0.25),rgba(0,0,0,0)),
linear-gradient(125deg,rgba(0,0,0,0) 5%,rgba(0,0,0,0.1) 25%,rgba(255,255,255,0.9) 48%,
rgba(255,255,255,0.9) 52%,rgba(255,255,255,0) 75%),
linear-gradient(55deg,rgba(0,0,0,0) 5%,rgba(0,0,0,0.1) 25%,rgba(255,255,255,0.9) 48%,
rgba(255,255,255,0.9) 52%,rgba(255,255,255,0) 75%),
linear-gradient(to bottom,#e5e0d5 30%,#c9c3bc 100%);
复制代码然后使用background-size设置色块的大小 background-position 设置定位 border-radius 将接头右侧设成弧形 box-shadow 给右侧的接头加上阴影看起来更加形象
background-size: 30% .4em,30% .4em,100% .4em,100% .4em,.4em 100%,30% 50%,30% 50%,100% 100%;
background-position: 55% 0,55% 100%,0 0,0 100%,0 50%,100% 0,100% 100%,0 50%;
border-radius: 0 1em 1em 0;
box-shadow: inset -0.3em 0 0.1em -0.1em rgb(0 0 0 / 20%);
复制代码当这些做完后，得到一个半成品的数据接头，效果如下
与常规接头相比，还缺少白灰相间类似芯片一样的部分。
首先给伪类设置合适个宽高并定位于上一步完成的样式右侧 设置背景色为白色 设置background-image 为间隔的白色、底色，模拟出条形码的样式
background-image: repeating-linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0) .18em,white .18em,white .36em),linear-gradient(to bottom,#ddd 20%,#bbb);
复制代码设置大小及定位
background-size: 50% 75%;
background-position: 50% 50%
复制代码将边角削圆润，并加上阴影。
border-radius: .5em; box-shadow: -0.1em 0 0.1em rgb(0 0 0 / 7%), 0.2em 0 0.1em rgb(0 0 0 / 10%);
复制代码合并起来就得到一个数据头
至此，一根与实物照片相似度高达99%的苹果数据线就完成了。