css技巧收集 2018-07-24

一、css绘制三角形

  {width: 0;height: 0;border-top: 50px solid transparent;    border-left: 100px solid #ccc;    border-bottom: 50px solid transparent;}

原理：利用三个边的边宽，相对的border的宽度是第三边的宽度的一半，以及设置不同边的透明度，达到看起来像是三角形的样子，调整比例可以形成不同方向的三角形

二、背景视觉差效果

background: url("../images/bj.jpg") fixed center center no-repeat;

主要是fixed属性

三、去掉横向滚动条

给body添加

style="overflow:-Scroll;overflow-x:hidden"

四、多行文本超出部分显示省略号

可以使用属性：

text-overflow: ellipsis;

overflow:hidden;

还可以使用：针对webkit浏览器及移动端

display: -webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:3;

overflow: hidden;

.kuwoAudio .musicLibrary_ .musicLibrary_star div { font-size: 0.2rem; margin-top: 1.6vh; width: 100%; height: 8.45vh; line-height: 8.45vh; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

五、改变滚动条样式

/*滚动条样式*/

.innerbox::-webkit-scrollbar{/*滚动条整体样式*/width: 4px;/*高宽分别对应横竖滚动条的尺寸*/height: 4px; }

.innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); }

.innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0; background: rgba(0,0,0,0.1); }

六。文字颜色渐变

background-image: -webkit-gradient(linear,0 0,0 bottom,from(#b39557),to(#684825));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;}