css3新样式

滚动条

.scroll{width: 580px; float: left;margin-left: 110px;margin-top: 20px;height: 160px; overflow-y: scroll;overflow-x:hidden; }
.scroll{::-webkit-scrollbar{ width: 10px; height:10px;background-color: #fff;position: absolute; left: 30px;}
.scroll{.show::-webkit-scrollbar{display: block;}
.scroll{::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 10px rgba(208,208,208,0.3); border-radius: 5px;background-color: #f0f0f0;position: relative; left: 30px;}
.scroll{::-webkit-scrollbar-thumb{ border-radius: 5px;-webkit-box-shadow: inset 0 0 10px rgba(208,208,208,.3); background-color: #d0d0d0;position: relative; left: 30px;}

进度条:

<p class="progressbar"><progress max="100" value="10"><ie style="width:10%;"></ie></progress></p>
样式:progress {display: inline-block;width:100%;height: 5px;background-color:#e5e5e5;border-radius: 5px;overflow: hidden;float: left;}
/*ie6-ie9*/
progress ie {display:block;height: 100%;background: #ff8a00; }
progress::-moz-progress-bar { background: #ff8a00; }
progress::-webkit-progress-bar { background: #e5e5e5; }
progress::-webkit-progress-value { background: #ff8a00; }

超出两行变省略号

overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;

猜你喜欢

转载自www.cnblogs.com/miss1332/p/9837868.html