きれいな紅白機のシミュレータを作る

これは純粋な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 media orientationを使用して実現することができる.

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

その他は、プロジェクトにソースコードを表示できます.
スタイル上の難点は大体以上ですが、もちろん画像を使って実現すれば、私が「顔を覆う」と言わなかったときにもいいです.

遊んでもいいですか

もちろんです.
次のリンクを開くことができます
https://web.codelabo.cn/NintendoNes/
または次のQRコードをスキャンします.
ここではjsnesを借りて完成した.
現在はマリオのみが内蔵されており、将来的には選択ゲームリストが作成される.
読んでくれてありがとうstar