这是红白机模拟器的纯css实现，没有使用任何图片，如下图，支持移动端横屏和竖屏两种模式，竖屏和横屏项目地址https://github.com/XboxYan/NintendoNes下面总结一下这种风格的难点。这部分反圆角使用radial-gradient完成背景：radial-gradient(circleatleftbottom,transparent14px,#da4a4a15px);即从透明到#da4a4a的渐变。这里的临界值并没有完全重叠，重叠会在谷歌浏览器中产生非常明显的锯齿效果。这部分高光阴影用多层box-shadow完成。如果是内阴影，需要增加insetbox-shadow:inset0px8px00pxrgba(255,255,255,.5);如果不是常规投影，可以使用drop-shadow实现filter:drop-shadow(5px5px0pxrgba(255,255,255,.8));横竖屏修改项目也兼容手机横竖屏，对应不同的风格，可以使用cssmediaorientation来实现@mediascreenand(orientation:landscape){/*横屏css*/}@mediascreenand(orientation:portrait){/*横屏css*/}其他的可以去项目查看源码。文体难点大致就是以上几点。当然，如果你用图片来实现，你可以当我没说【捂脸】。我可以玩吗？当然。您可以打开以下链接https://web.codelabo.cn/NintendoNes/或扫描以下二维码，借助jsnes完成。目前只有马里奥内置，未来会做成精选游戏榜单。感谢阅读，欢迎star
