我的积分css

我的积分CSS

前言：

在学习HTML/CSS的过程中，我们必须熟练掌握CSS。而我的积分CSS是我在学习CSS过程中积累下来的一些优秀的CSS样式代码。

/*设置图片自适应大小*/img{
    max-width: 100%;
    height:auto;
}
/*清除浮动*/.clearfix:after{
    display:block;
    visibility:hidden;
    height:0;
    clear:both;
    content:"";
}
/*制作圆形图片*/.round_img{
    width:100px;
    height:100px;
    border-radius:50%;
    overflow:hidden;
}
/*实现长文本截断显示省略号*/.ellipsis{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
/*自定义滚动条样式*/::-webkit-scrollbar{
    width:8px;
}
::-webkit-scrollbar-track-piece {
    background-color:rgba(0,0,0,.05);
    border-radius:6px;
}
::-webkit-scrollbar-thumb:vertical{
    height:20px;
    background-color:rgba(0,0,0,.2);
    border-radius:6px;
    -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
}
 /*实现返回顶部效果*/.go-top{
    position:fixed;
    bottom:20px;
    right:10px;
    width:40px;
    height:40px;
    line-height:40px;
    font-size:20px;
    border-radius:5px;
    background:#333;
    color:#fff;
    text-align:center;
    z-index:99;
    -webkit-transition:all .5s;
    transition:all .5s;
}
.go-top:hover{
    background:#f40;
}
/*实现圆形按钮与背景悬浮效果*/.circle{
    display:inline-block;
    width:50px;
    height:50px;
    border:4px solid #fff;
    border-radius:50%;
    line-height:40px;
    text-align:center;
    font-size:20px;
    color:#fff;
    background:rgba(0,0,0,.5);
    text-decoration:none;
    -webkit-transition:all .5s;
    transition:all .5s;
}
.circle:hover{
    background:#f00;
    border-color:#f00;
}
    

以上代码可在实际项目开发中使用，大大提高了编写效率，降低了代码成本。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！