常用css样式集合

发布时间:2021-04-29 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了常用css样式集合前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

设置滚动条样式

/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/::-webkit-scrollbar {    width: 10px; /*对垂直流动条有效*/
    height: 10px; /*对水平流动条有效*/}/*定义滚动条的轨道颜色、内阴影及圆角*/::-webkit-scrollbar-track{    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);    background-color: rosybrown;    border-radius: 3px;
}/*定义滑块颜色、内阴影及圆角*/::-webkit-scrollbar-thumb{ 
    border-radius: 7px;    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    background-color: #E8E8E8;
}/*定义两端按钮的样式*/::-webkit-scrollbar-button {    background-color: cyan;
}/*定义右下角汇合处的样式*/::-webkit-scrollbar-corner {    background: red;
}

设置input中placeholder的样式

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
    color: red;
}input::-moz-placeholder { /* Firefox 19+ */  
    color: red;
}input:-ms-input-placeholder { /* IE 10+ */
    color: red;
}input:-moz-placeholder { /* Firefox 18- */
    color: red;
}

内容超出显示省略号

/*单行*/width:200rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;/*多行*/word-break: break-all;display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;overflow: hidden;

清除浮动

/*清除浮动最现代、最流行、最简单的方式*/.clearfix:before,.clearfix:after {  content: "";  display: table;
}.clearfix:after {  clear: both;
}/*兼容IE67*/.clearfix {
  *zoom: 1;
}


总结


以上是前端之家为你收集整理的常用css样式集合全部内容,希望文章能够帮你解决常用css样式集合所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。