CSS
语言：
CSSSCSS
确定
html {
font-size: 24px;
}
body {
font-size: .65rem;
font-family: PT Sans Caption;
line-height: @fontsize;
color: #CBA;
background: #C9C8CA;
}
#bugs {
position: absolute;
display: inline-block;
height: 150px;
width: 150px;
left: 45%;
top: 35%;
background: url(http://static.tumblr.com/28b4d2eb44e1190c2273802c444534d5/3fzcjhe/fwxmy5a0l/tumblr_static_bugs-bunny-bugs-bunny-26143775-500-355.jpg);
background-size: 100%;
}
.panel {
position: absolute;
display: inline-block;
margin: 1rem;
background: linear-gradient(to bottom, #444246, #323034);
width: 7rem;
padding: .5rem 1rem;
border-radius: .5rem;
box-shadow: 0 0 0 1px #000, 0 3px 1px -1px #444;
}
.ni,
span {
position: relative;
display: block;
}
.ni {
padding-bottom: .5rem;
}
.ni label {
position: absolute;
bottom: 8px;
display: inline-block;
width: 1rem;
font-size: .5rem;
}
.ni label:last-child {
right: 0;
}
.btn {
display: inline-block;
position: relative;
padding: 2px 6px;
border-radius: 8px;
box-shadow: 0 0 0 1px #000;
background: linear-gradient(to bottom, #700, #500);
cursor: pointer;
}
input[type=range] {
-webkit-appearance: none;
position: relative;
height: 1px;
width: 6rem;
top: -8px;
}
input[type=range]:focus {
outline: none;
background: #800;
}
input[type=range]::-moz-range-track {
width: 100%;
background: #242424;
}
input[type=range]::-moz-range-thumb {
background: #A6A4A8;
border: 0;
height: .5rem;
width: .5rem;
box-shadow: 2px 2px 1px #000;
}
.lock {
position: absolute;
display: inline-block;
right: -.75rem;
bottom: .8rem;
font-family: FontAwesome;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + label:after {
content: '\f127';
font-size: .75rem;
}
input[type=checkbox]:checked + label:after {
font-family: FontAwesome;
content: '\f0c1';
}
535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
