常用CSS样式

目录

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弹窗动效 - 知乎