建议在Firefox或Chrome中测试,在模拟器中预览。
【示例】
-
HTML
<div id="desktop"> <div id="bgWindow" class="window secondary"> <span>对话框</span> <div class="content"></div> </div> <div id="frontWindow" class="window"> <span>用户反馈</span> <div id="winInput"><input type="text" value="姓名"><input type="text" value="联系方式"></div> <div id="winContent" class="content">请输入你的反馈意见……</div> </div> <div id="startmenu"> <button id="winflag">开始</button> <span id="toolBtn"> <button class="application">☁</button> <button class="application">✱</button> <button class="application">☀</button> <button class="application">☯</button> </span> </div> </div>
-
CSS
html,body { padding:0; margin:0; height:100%; } #desktop { background: #2c609b; height:100%; font: 12px "Segoe UI", Tahoma, sans-serif; position: relative; -moz-box-shadow: inset 0 -200px 100px #032b5c, inset -100px 100px 100px #2073b5, inset 100px 200px 100px #1f9bb1; -webkit-box-shadow: inset 0 -200px 100px #032b5c, inset -100px 100px 100px #2073b5, inset 100px 200px 100px #1f9bb1; box-shadow: inset 0 -200px 100px #032b5c, inset -100px 100px 100px #2073b5, inset 100px 200px 100px #1f9bb1; overflow: hidden; } #startmenu { position: absolute; bottom: 0; height: 40px; width: 100%; background: rgba(178, 215, 255, 0.25); -webkit-box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.25), inset 0 1px #042754, inset 0 2px #5785b0; box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.25), inset 0 1px #042754, inset 0 2px #5785b0; overflow: hidden; } #startmenu button { font-size: 1.6em; color: #fff; text-shadow: 1px 2px 2px #00294b; } #startmenu #winflag { float: left; margin: 2px; height: 34px; width: 80px; margin-right: 10px; border: none; background: #034a76; -moz-border-radius: 40px; -webkit-border-radius: 40px; border-radius: 40px; -moz-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255, 255, 255, 0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df; -webkit-box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000; box-shadow: 0 0 1px #fff, 0 0 3px #000, 0 0 3px #000, inset 0 1px #fff, inset 0 12px rgba(255, 255, 255, 0.15), inset 0 4px 10px #cef, inset 0 22px 5px #0773b4, inset 0 -5px 10px #0df; } #startmenu .application { position: relative; bottom: 1px; height: 38px; width: 52px; background: rgba(14, 59, 103, 0.25); border: 1px solid rgba(0, 0, 0, 0.8); -o-transition: .3s all; -webkit-transition: .3s all; -moz-transition: .3s all; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255, 255, 255, 0.33), inset -2px -2px 10px rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 1px #fff, inset 4px 4px 20px rgba(255, 255, 255, 0.33), inset -2px -2px 10px rgba(255, 255, 255, 0.25); } #startmenu .application:hover { background-color: rgba(255, 255, 255, 0.25); } .window { -webkit-border-radius: 8px; -webkit-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000; -moz-border-radius: 8px; -moz-box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000; position: absolute; left: 150px; top: 75px; width: 400px; padding: 7px; height: 400px; border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(178, 215, 255, 0.75); border-radius: 8px; box-shadow: 0 2px 16px #000, 0 0 1px #000, 0 0 1px #000; text-shadow: 0 0 15px #fff, 0 0 15px #fff; } .window span { display: block; } .window input { -webkit-border-radius: 2px; -webkit-box-shadow: 0 0 2px #fff, 0 0 1px #fff; -moz-border-radius: 2px; -moz-box-shadow: 0 0 2px #fff, 0 0 1px #fff, inset 0 0 3px #fff; font-size: 1em; display: inline-block; margin: 30px 0 10px 0; border: 1px solid rgba(0, 0, 0, 0.5); padding: 4px 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.75); width: 44%; box-shadow: 0 0 2px #fff, 0 0 1px #fff, inset 0 0 3px #fff } .window input + input { margin-left: 12px; } .window.secondary { left: 300px; top: 95px; opacity: 0.66; } .window.secondary span { margin-bottom: 85px; } .window .content { -webkit-border-radius: 2px; -webkit-box-shadow: 0 0 5px #fff, 0 0 1px #fff; -moz-border-radius: 2px; -moz-box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; background: #fff; border: 1px solid #000; border-radius: 2px; padding: 10px; height: 279px; box-shadow: 0 0 5px #fff, 0 0 1px #fff, inset 0 1px 2px #aaa; text-shadow: none; }