body {
background: url(../images/body_bg.png);
}
#gallery {
position: absolute;
top: 50%;
left: 50%;
width: 1320px;
margin: -125px 0 0 -672px;
}
#galleryArea {
width: 100%;
overflow: hidden;
}
#galleryCon {
height: 154px;
padding: 13px 0;
margin-bottom: 50px;
background-color: #1D1D1F;
background: -webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);
box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 1px 0 #37343B;
overflow: hidden;
}
#galleryCon li {
float: left;
display: inline;
margin: 0 10px;
border: 2px solid #37343B;
}
#galleryCon li img {
display: block;
width: 240px;
height: 150px;
}
#scrollbar {
position: relative;
width: 500px;
height: 7px;
margin: 0 auto 13px auto;
background: #1A1819;
box-shadow: inset 0 0 5px #0F0D12;
border-radius: 6px;
}
#scrollBtn {
display: block;
position: absolute;
top: -10px;
left: 0;
margin-left: 0;
width: 23px;
height: 23px;
cursor: pointer;
border: 2px solid #151318;
background-color: #1B1B1D;
background: -webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);
}
#scrollBg {
position: absolute;
top: 0;
left: 0;
height: 7px;
background-color: #6B32B5;
background: -webkit-linear-gradient(top, #7532BD, #432364);
border-radius: 6px 0 0 6px;
overflow: hidden;
}
#scrollBtn:before {
content: '';
position: absolute;
top: 7px;
left: 7px;
width: 9px;
height: 9px;
background-color: #514559;
}
#scrollBtn:hover {
box-shadow: 0 0 10px #7337BB;
}
#scrollBtn:hover:before { /* IE10不支持该方法 */
background-color: #CE9CE1;
box-shadow: 0 0 5px #7337BB;
}
/* 扩展 */
#prevBtn, #nextBtn {
display: block;
position: absolute;
top: 68px;
width: 40px;
height: 40px;
border: 2px solid #151318;
box-shadow: inset 0 1px 0 #37343B;
background-color: #1B1B1D;
background: -webkit-linear-gradient(top, #27252A 0%, #232027 50%, #1D1D1F 50%, #1B1B1D 100%);
}
#prevBtn {
left: -50px;
}
#nextBtn {
right: -50px;
}
#prevBtn:before, #nextBtn:before {
content: '';
position: absolute;
top: 10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
#prevBtn:before {
left: 14px;
border-right: 10px solid #514559;
}
#nextBtn:before {
right: 14px;
border-left: 10px solid #514559;
}
#prevBtn:hover:before {
border-right: 10px solid #CE9CE1;
-webkit-filter: drop-shadow(0 1px 8px #7337BB);
}
#nextBtn:hover:before {
border-left: 10px solid #CE9CE1;
-webkit-filter: drop-shadow(0 1px 8px #7337BB);
}