设置滚动条样式
/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-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; }