灵活运用CSS3特性绘制简易版围棋效果

网络
溪水很清澈，小鱼小虾都看的一清二楚。你看一群群的小鱼在前面游来游去，那只小虾从石头缝里爬出来向诱饵靠近，还有还有那只红钳子的大虾夹住了诱饵，哦，上钩咯！溪水上的钱币也随着一晃一晃的，星星点点的，投到了水面上，投到了石头上，还投到了我们的身上。夕阳西下暑气渐渐消退，我们也都相伴着回家了，带回去的不仅仅只有那些小虾……

前言

渐变的灵活运结合其他一些CSS3的特性的运用画出的简易版围棋

效果图

实现代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  4. <head>
  5. <metacharset="UTF-8">
  6. <metaname="viewport"content="width=device-width,initial-scale=1.0">
  7. <metahttp-equiv="X-UA-Compatible"content="ie=edge">
  8. <title>CSS3:画简易围棋：chess</title>
  9. <style>
  10. html{
  11. font-size:50px;
  12. }
  14. .chessboard{
  16. -webkit-box-shadow:.1rem.1rem.05remrgba(0,0,0,.5),
  17. -.1rem-.1rem.05remrgba(0,0,0,.5);
  19. box-shadow:.1rem.1rem.05remrgba(0,0,0,.5),
  20. -.1rem-.1rem.05remrgba(0,0,0,.5);
  21. height:calc(19rem+0.04rem);
  22. width:calc(19rem+0.04rem);
  23. background:#daca39;
  24. background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0.04rem,white),color-stop(0,transparent)),-webkit-gradient(linear,lefttop,righttop,color-stop(0.04rem,white),color-stop(0,transparent));
  25. background-image:-webkit-linear-gradient(white0.04rem,transparent0),-webkit-linear-gradient(left,white0.04rem,transparent0);
  26. background-image:linear-gradient(white0.04rem,transparent0),linear-gradient(90deg,white0.04rem,transparent0);
  27. -webkit-background-size:1rem1rem;
  28. background-size:1rem1rem;
  29. }
  31. .chess{
  32. position:relative;
  33. height:1rem;
  34. width:1rem;
  35. border-radius:0.5rem;
  36. -webkit-box-shadow:.01rem.01rem.1remrgba(0,0,0,.5),00.05remrgba(240,240,240,.5),.05rem.05rem.01remrgba(255,255,255,.15)inset,.1rem.1rem.1remrgba(255,255,255,.05)inset,-.05rem-.05rem.25remrgba(0,0,0,.15)inset,-.1rem-.1rem.35remrgba(0,0,0,.05)inset;
  37. box-shadow:.01rem.01rem.1remrgba(0,0,0,.5),00.05remrgba(240,240,240,.5),.05rem.05rem.01remrgba(255,255,255,.15)inset,.1rem.1rem.1remrgba(255,255,255,.05)inset,-.05rem-.05rem.25remrgba(0,0,0,.15)inset,-.1rem-.1rem.35remrgba(0,0,0,.05)inset;
  38. }
  40. .chess-white{
  41. left:.5rem;
  42. top:.5rem;
  43. background:#EEE;
  44. }
  46. .chess-black{
  47. background:#000;
  48. left:10.5rem;
  49. top:10.5rem;
  50. }
  51. </style>
  52. </head>
  54. <body>
  55. <divclass="chessboard">
  56. <divclass="chesschess-white"></div>
  57. <divclass="chesschess-black"></div>
  58. </div>
  60. </body>
  62. </html>

总结

注意点：

阴影和渐变是可以多重覆盖应用的，控制好可以制作很多不错的效果
可以用rem结合calc来实现精准控制（棋盘的大小，棋子等）
阴影不单单只有偏移量和扩散范围，还能控制外阴影还是内阴影（默认是外阴影 ，内阴影写在最后一个参数 inset）
rem是计算的依旧是根元素的字体大小（html的font-size,常规浏览器默认是16px,也可以手动设置）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。