目录

1、文本超出省略号代替 

2、自定义滚动条样式

3、文本无法选中

4、字体间距

5、放大动画效果

6、CSS引用数字字体

7、CSS去角

8、CSS :after、:before、::after、::before的使用

9、CSS使用::after去除浮动

10、时间动画属性 transition

11、颜色渐变

12、解决移动端弹出层出现后滑动屏幕底层依旧可以滑动的方法

13、div元素浮动不换行解决方法

14、css  calc( )函数的使用

15、CSS 禁止文本选中

16、鼠标移入 缓慢移动、阴影特效

17、CSS代码样式字体

---

1、文本超出省略号代替 

/*单行文本省略号*/
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;/*多行文本省略号*/
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2;
display: -webkit-box;
-webkit-box-orient: vertical;

2、自定义滚动条样式

/*谷歌、safari、qq浏览器、360浏览器滚动条样式*/

/* 滑道样式 */
.el-aside::-webkit-scrollbar{width:5px;background:#304156;border-radius: 6px;
}
/* 定义滑块的样式 */
.el-aside::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background-color:rgba(0,0,0,0.3);
}
/* 定义滑块鼠标移入时的样式 */
.el-aside::-webkit-scrollbar-thumb:hover{border-radius: 10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background-color:rgba(0,0,0,0.4);
}

::-webkit-scrollbar {  width: 5px;  height: 110px;  background-color: #F5F5F5;  }  /*定义滚动条轨道 内阴影+圆角*/   /*定义滑块 内阴影+圆角*/  ::-webkit-scrollbar-thumb {  border-radius: 10px;  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  background-color: #bdbdbd;  }  /*滑块效果*/::-webkit-scrollbar-thumb:hover {border-radius: 5px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.4);}/*IE滚动条颜色*/html {scrollbar-face-color:#bfbfbf;/*滚动条颜色*/scrollbar-highlight-color:#000;scrollbar-3dlight-color:#000;scrollbar-darkshadow-color:#000;scrollbar-Shadow-color:#adadad;/*滑块边色*/scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/scrollbar-track-color:#eeeeee;/*背景颜色*/}

3、文本无法选中

user-select:none;

4、字体间距

letter-space:12px;

5、放大动画效果

        使用：<div class="animation-scale-up"></div>

@keyframes fade-scale {0% {opacity: 0;-webkit-transform: scale(.2);-o-transform: scale(.2);transform: scale(.2);}100% {opacity: 1;-webkit-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
}
.animation-scale-up {-webkit-animation-name: fade-scale;-o-animation-name: fade-scale;animation-name: fade-scale;
}

6、CSS引用数字字体

@font-face{font-family:electronicFont;src:url('../font/DS-DIGIT.TTF)
}/*需要下载：（  DS-DIGIT.TTF  ）字体库*/

7、CSS去角

8、CSS :after、:before、::after、::before的使用

:before == ::before   :after == ::after   

css2的写法：:after :before   

css3的写法：::after   ::before

 .box{
        width:200px;
        height:200px;
        background:rgba(0,0,255,0.3);
        margin:30px auto;
        position:relative;
    }
    .box:before{
        content:"";
        position:absolute;
        top:0px;
        width:20px;
        height:10px;
        border-left:2px solid red;
        border-top:2px solid red;
    }
    .box:after{
        content:"";
        position:absolute;
        top:0px;
        right:0px;
        width:20px;
        height:10px;
        border-right:2px solid red;
        border-top:2px solid red;
    }
    .box_in{
        width:100%;
        position: absolute;
        bottom:0px;
        left:0px;
    }
    .box_in:before{
        content:"";
        position:absolute;
        bottom:0px;
        left:0px;
        width:20px;
        height:10px;
        border-left:2px solid red;
        border-bottom:2px solid red;
    }

    .box_in:after{
        content:"";
        position:absolute;
        bottom:0px;
        right:0px;
        width:20px;
        height:10px;
        border-right:2px solid red;
        border-bottom:2px solid red;
    }

9、CSS使用::after去除浮动

解决因为子元素浮动导致父元素高度塌陷的问题

.box::after{content:"";display: block;clear:both;height:0,visibility: hidden;
}

10、时间动画属性 transition

div{transition:all 0.4s;
}div:hover{background:red;
}

11、颜色渐变

background:linear-gradient(to right,#fff,#000); /*默认是从上向下*/
background:-webkit-linear-gradient(45deg,red,green);

12、解决移动端弹出层出现后滑动屏幕底层依旧可以滑动的方法

        当弹窗显示的时候，获取屏幕scrollTop，给底层的元素使用fixed定位 ，top为-scrollTop

        当弹窗消失的时候，给底层的元素恢复原定位scrollTop

13、div元素浮动不换行解决方法

        

<div class="parent"><div class="children"></div><div class="children"></div><div class="children"></div><div class="children"></div>
</div>
<style>.parent{width:1000px;height:200px;display:flex;flex-grow:nogrow;}.children{width:500px;height:200px;float:left;}
</style>

14、css  calc( )函数的使用

注意：calc 和 运算符 一定需要使用空格隔开才能生效

 width: calc(100% - 100px);    /*父元素宽度的100% 减去 120px*/height: calc(100% - 120px);   /*父元素高度的100% 减去 120px*/

15、CSS 禁止文本选中

user-select：none |text| all | element

none：文本不能被选择

text：可以选择文本

all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

element：可以选择文本，但选择范围受元素边界的约束

16、鼠标移入 缓慢移动、阴影特效

.tool-box{border-radius: 2px;overflow: hidden;top:0px;position: relative;transition:all .2s linear;z-index:999999;}
.tool-box:hover{// box-shadow:0 2px 14px rgba(0,0,0,0.1);box-shadow:0 15px 30px rgb(0 0 0 / 10%);top:-2px;
}

17、CSS代码样式字体

.pre{font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
}   

18、CSS弹窗动画

参考文章：几种CSS弹窗动效 - 知乎