常用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;


/* 显示两行文本，超过两行使用省略号 */
.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

19、Flex平均间隔自动换行布局

.course-list-container{
    width:100%;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap:18px;
    .course-item{
        flex:1 1 48%;
        height:300px;
        margin-bottom:18px;
        border-radius: 8px;
    }
}

参考文章：flex布局设置一行显示多个，水平布局，自动换行_flex布局自动换行-CSDN博客

20、图片铺满参数

object-fit:cover 会占满div，会产生一个图片的裁剪
object-fit:contain 会产生空隙