作一个好看的红白机模拟器

这是一个纯css实现的红白机模拟器，没有使用到任何图片，以下图所示

同时支持移动端横竖屏模式

竖屏

横屏

项目地址

https://github.com/XboxYan/NintendoNes

下面对该样式中的疑难点总结一下。

反向圆角

这一部分采用radial-gradient完成

background: radial-gradient( circle at left bottom,transparent 14px, #da4a4a 15px);

也就是从transparent到#da4a4a的渐变，这里的临界值没有彻底重叠，重叠会在谷歌浏览器产生一个很明显的锯齿效果

高光阴影

这一部分采用了多层box-shadow完成，若是是内阴影须要增长inset

box-shadow: inset 0px 8px 0 0px rgba(255,255,255,.5);

若是是不规则投影，能够使用drop-shadow实现

filter: drop-shadow(5px 5px 0px rgba(255,255,255,.8));

横屏竖屏

改项目还兼容了移动端横竖屏，对应不一样的样式，能够使用css mediaorientation来实现

@media screen and (orientation: landscape) {
/*横屏 css*/
}
@media screen and (orientation: portrait) {
/*横屏 css*/
}

其余能够前往项目查看源码。

样式上的疑难点大体是以上几点，固然若是你使用图片来实现的话能够当我没说[捂脸]。

能够玩吗

固然。

你能够打开下面连接

https://web.codelabo.cn/NintendoNes/

或者扫描如下二维码

这里借助了jsnes来完成。

目前仅内置了马里奥，未来会作成选择游戏列表。

感谢阅读，欢迎star