.ov_hi { overflow: hidden; } .alwaysShow td { position: relative; } .alwaysShow td .df-class { position: absolute; z-index: 1; top: 50%; left: 100%; transform: translate(-50%, -50%); } .df-persp, .persp-bg { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 6000; pointer-events: auto; /*禁止事件穿透*/ } .persp-bg { -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: .5; filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); width: 100%; height: 100%; background: #000; z-index: 1; } .df-box { min-width: 170px; background: #fff; border-radius: 10px; font-size: 12px; text-shadow: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 2; position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -ms-touch-action: none; overflow: hidden; text-align: center; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); top: 50%; left: 50%; transform: translate(-50%, -50%); } .df-main { /*padding: 10px;*/ } .df-item { position: relative; overflow: hidden; } .df-item .G-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .G-top { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: linear-gradient(#fff 0%, rgba(255, 255, 255, .85)45%, rgba(255, 255, 255, .6) 75%, rgba(255, 255, 255, .4) 100%); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.45, rgba(255, 255, 255, .85)), color-stop(0.75, rgba(255, 255, 255, .6)), to(rgba(255, 255, 255, .4))); background: -moz-linear-gradient(#fff 0%, rgba(255, 255, 255, .85) 45%, rgba(255, 255, 255, .6) 75%, rgba(255, 255, 255, .4) 100%); background: -o-linear-gradient(#fff 0%, rgba(255, 255, 255, .85) 45%, rgba(255, 255, 255, .6) 75%, rgba(255, 255, 255, .4) 100%); } .G-mid { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .G-btm { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: linear-gradient(rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .6)25%, rgba(255, 255, 255, .85) 65%, #fff 100%); background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .4)), color-stop(0.25, rgba(255, 255, 255, .6)), color-stop(0.65, rgba(255, 255, 255, .85)), to(#fff)); background: -moz-linear-gradient(rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .6) 25%, rgba(255, 255, 255, .85) 48%, #fff 100%); background: -o-linear-gradient(rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .6) 25%, rgba(255, 255, 255, .85) 48%, #fff 100%); } .df-ctn { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0 2px; position: relative; background: #000; zoom: 1; } .df-wrap { display: inline-block; } .df-strip { position: relative; z-index: 2; } .df-ul { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; text-decoration: none; list-style: none; padding: 0; margin: 0; } .df-li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 5px; display: block; text-align: center; vertical-align: bottom; filter: Alpha(Opacity=90); /* text-shadow: 0 1px 1px #000;*/ font-size: 18px; white-space: nowrap; } .df-class { font-size: 18px; } .df-btn { display: block; } .df-btn div { display: inline-block; width: 50%; cursor: pointer; border: 1px solid #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .df-btn div:active { background: #f60; color: #fff; border: 1px solid #f60; } .df-hide { visibility: hidden; }