一些CSS样式的收藏

 修改浏览器的滚动条

/* 定义滚动条样式 */
::-webkit-scrollbar {
    width: 5px; /*定义滚动条宽度*/
    height: 5px; /*定义滚动条高度*/
    border-radius: 5px; /*定义滚动条圆角*/
    background-color: rgba(240, 240, 240, 0.1); /*定义滚动条颜色*/
    background: rgba(240, 240, 240, 0.1); /*定义滚动条颜色*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); /*定义轨道阴影*/
    border-radius: 5px; /*定义轨道圆角*/
    background-color: rgba(4, 56, 114, .5); /*定义轨道颜色 */
    background: rgba(4, 56, 114, .5); /*定义轨道颜色*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 5px; /*定义滑块圆角*/
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); /*定义滑块阴影*/
    background-color: rgba(2, 33, 54, .5); /*定义滑块颜色*/
    background: rgba(2, 33, 54, .3); /*定义滑块颜色*/
}

效果 

 设置元素的点击效果

/*元素基础样式*/
.tab-div-yw{
    height: 45px;
    border: 1px solid;
    line-height: 45px;
    text-align: center;
    border-radius: 10px;
}
/*元素点击*/
.tab-div-yw:active {
    background-color: rgba(46, 103, 222, 0.20);
}
/*元鼠标事件*/
.tab-div-yw:hover {
    border-radius: 10px;
    box-shadow: 0 0 10px 1px rgb(0 0 0 / 40%);
    transition: 0.3s;
    cursor: pointer;
}

 效果图

 

 div元素的勾选实现,基于layui

<style>
.layui-upload-list{}
.upload-img-box{float: left; position: relative;border: 1px solid #1e9fff;
    margin: 25px 15px 0 15px;border-radius: 5%;

}
.upload-img-box .pear-icon{font-size: 20px; color: red; position: absolute;
    top: -10px; right: -10px; cursor: pointer;
    border: 1px solid;
    border-radius: 50%;
}
.layui-upload-img{width: 140px; height: 180px; margin: 0 10px}
/*pear-input-close-bold*/
.upload-img-box .pear-input {font-size: 20px; color: red; position: absolute;
    top: -5px; right: -5px; cursor: pointer;
    border: 1px solid;
    border-radius: 50%;
    zoom:180%;
}
.upload-img-box input[type=checkbox], .layui-form input[type=radio], .layui-form select {
    /*display: block !important;*/
}
.upload-img-box .input-show{
    display: block !important;
}
.image-name{
    text-align: center;
    overflow: hidden;
    width: 140px;
}
.image-del{
    background-color: red;
}
</style>
.......
<div class="layui-upload-list" id="upImgShow">
    <div class="upload-img-box">
	<!-- <i class="pear-icon pear-icon-close-bold"></i> -->
	<input class="pear-input pear-input-close-bold input-hidden input-show" type="checkbox" name="del[]" value="44">
	<img class="layui-upload-img" src="/api/uploads/16325667941000-safasfasf.jpeg">
	<div class="image-name">safasfasf.jpeg</div>
	<input type="hidden" name="image[]">
    </div>
</div>
.....

 效果图