1.美化滚动条
* {
scrollbar-base-color: #2d5333;
scrollbar-3dlight-color: #fff;
scrollbar-highlight-color: #fff;
scrollbar-track-color: #eee;
scrollbar-arrow-color: #2d5333;
scrollbar-shadow-color: #fff;
}
::-webkit-scrollbar {
width: 8px;
height: 11px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
/* border-radius: 999px; */
/* border: 5px solid transparent; */
}
::-webkit-scrollbar-track {
/* box-shadow: 1px 1px 5px rgba(0,0,5,.2) inset; */
background-color: #eee;
} /* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb {
/* min-height: 20px; */
/* background-clip: content-box; */
/* box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset; */
background-color: #2d5333;
} /* 滑块颜色 */
::-webkit-scrollbar-corner {
/* background: transparent; */
background-color: black;
} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
::-webkit-scrollbar-button {
background-color: #eee;
} /* 滑轨两头的监听按钮颜色 */
2.下拉框 :
.selectwrap::after 这个样式的content,可以使用自制图标
<div class="selectwrap">
<select class="selecttype">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
.selecttype {
position: relative;
z-index: 2;
padding: 0 20px 0 10px;
display: inline-block;
height: 40px;
border: 1px solid #a0a0a0;
border-radius: 4px;
color: #333;
font-weight: normal;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
}
.selecttype::-ms-expand{
/* color: #fff; */
/* font-size:20px; */
/* padding:5px 9px; */
/* background: #0054a7; */
display: none;
}
.selectwrap {
position: relative;
display: inline-block;
z-index: 1;
vertical-align: top;
}
.selectwrap::after {
content: "\25BC";
position: absolute;
top: 10px;
right: 5px;
/* font-family: 'lsh-icon' !important; */
font-size: 16px;
color: #000;
z-index: 1;
}
3. 背景色渐变:
background-color:#056e68;
background-image:-webkit-linear-gradient(top, #2495ED 0%, #056e68 100%);
background-image:-moz-linear-gradient(top, #2495ED 0%, #056e68 100%);
background-image:-ms-linear-gradient(top, #2495ED 0%, #056e68 100%);
background-image:-o-linear-gradient(top, #2495ED 0%, #056e68 100%);
background-image:linear-gradient(to bottom, #2495ED 0%, #056e68 100%);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#2495ED', EndColorStr='#056e68');
box-shadow:inset 1px 1px 3px #666
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。