首先我们给表盘一个基础style确定基本结构，添加一些渐变和阴影来创建一点立体感#watch.frame-face{position:relative;宽度：30em；高度：30em；保证金：2em自动；边界半径：15em；背景：-webkit-linear-gradient（顶部，#f9f9f9，#666）；-线性渐变（顶部，#f9f9f9，#666）；背景：线性渐变（顶部，#f9f9f9，#666）；box-shadow:0.5em0.5em4emrgba(0,0,0,0.8);}之后我们使用伪类元素绘制径向渐变来营造层次感，做出立体效果拨号更激烈#watch.frame-face:before{内容:'';宽度：29.4em；高度：29.4em；边界半径：14.7em；位置：绝对；顶部：.3em；左：.3em；背景：-webkit-径向渐变（中心椭圆，rgba（246、248、249、1）0%，rgba（229、235、238、1）65%，rgba（205、212、217、1）66%,rgba(245,247,249,1)100%);背景：-moz-径向渐变（中心椭圆，rgba（246、248、249、1）0%，rgba（229、235、238、1）65%，rgba（205、212、217、1）66%,RGBA(245,247,249,1)100%);背景：径向渐变（中心椭圆，rgba(246,248,249,1)0%，rgba(229,235,238,1)65%，rgba(205,212,217,1)66%，rgba(245,247,249,1)100%);}这个还是不太顺眼，我们加个伪类来做一个可变磁盘主面板，通过阴影和渐变造成的对比效果，使这个表盘看起来更真实#watch.frame-face:after{content:'';宽度：28em；高度：28em；边界半径：14.2em；位置：绝对；顶部：.9em；左：.9em；box-shadow:insetrgba(0,0,0,.2).2em.2em1em;边框：.1em实心rgba(0,0,0,.2)；背景：-webkit-linear-gradient(top,#fff,#ccc);背景：-moz-linear-gradient(top,#fff,#ccc);background:linear-gradient(top,#fff,#ccc);}刻度盘周围有小的刻度点，这样我们就可以知道当前的具体时间，这里我们给刻度盘设置60个刻度点，我们先写一个dom节点的刻度点容器，因为刻度点太多，我们会用js生成来个基本样式#分钟标记li{显示：块；宽度：0.2em；高度：0.6em；背景：#929394；位置：绝对；顶部：50%；左：50%；margin:-0.4em00-0.1em;}这里我们通过transform调整每个尺度点的位置，达到相应的效果。整个点的比例比其他的更突出，所以我们需要找出整个点的位置给比例添加一个突出的效果window.onload=function(){//生成一个比例letmarkWrap=document.getElementById('minute-marks')for(letindex=0;index<60;index++){letmarkItem=document.createElement('li')markItem.style.cssText="transform:rotate("+index*6+"deg)translateY(-12.7em)";if(index%5==0){markItem.style.宽度=“0.3em”；markItem.style.height="1em";}markWrap.appendChild(markItem)}}这里也可以考虑酌情加入一些尺度

3

6

9

12

#digits{宽度：30em;高度：30em；边界半径：15em；位置：绝对；顶部：0；左：50%；margin-left:-15em;}#digitsli{字体大小:1.6em;显示：块；宽度：1.6em；高度：1.6em；位置：绝对；顶部：50%；左：50%；行高：1.6em；文本对齐：居中；weight:bold;}#digitsli:nth-child(1){transform:translate(7em,0)}#digitsli:nth-child(2){transform:translate(0,7em)}#digitsli:nth-child(3){transform:translate(-7em,0)}#digitsli:nth-child(4){transform:translate(0,-7em)}这里我们直接把指针的轴做成中心点在#digits:before{内容:''之前旋转;宽度：1.6em；高度：1.6em；边界半径：.8em；位置：绝对；顶部：50%；左：50%；保证金：-.8em00-.8em；背景：#121314；}#digits：之后{内容：''；宽度：4em；高度：4em；边界半径：2.2em；位置：绝对；顶部：50%；左：50%；保证金：-2.1em00-2.1em；边框：.1em实心#c6c6c6；背景：-webkit-径向渐变（中心椭圆，rgba（200,200,200,0），rgba（190,190,190,1）90％，rgba（130,130,130,1）100％）;背景：-moz-径向渐变（中心椭圆，rgba（200,200,200,0），rgba（190,190,190,1）90％，rgba（130,130,130,1）100％）;background:radial-gradient(ellipseatcenter,rgba(200,200,200,0),rgba(190,190,190,1)90%,rgba(130,130),1100%);}指针开发下面我们来开发表盘指针。这里我们准备三个dom，分别是时针、分针和秒针。