常用css样式

1、单行省略

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

2、字符之间间距

letter-spacing: 5px;

3、vue动态样式

:class="['common-box', selectNum == item.id ? 'active-box' : '']"

4、精灵图

面对一整个图片里面只有一部分图片是有效果的，不限展示没有效果的部分可以使用精灵图

width: 320px;
height: 195px; //图片有效的尺寸
background-size: 320px 220px; //原图片尺寸
position: absolute;
background: url('/img/cesiumImg/popBG.png') no-repeat 0px -40px; //移动的距离

5、多行省略

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

6、渐变文字

background: linear-gradient(to top, #fff, #fff, #8feaee);
-webkit-background-clip: text;
color: transparent;

7、文字发光

text-shadow: 0 0 8px #014fff, 0 0 8px #014fff, 0 0 8px #014fff,
            0 0 8px #014fff;

注意：文字渐变和文字发光效果同时使用的时候，由于文字渐变已经把自己设置成透明的了，所以背景有什么就会显示什么颜色，会出现渐变消失显示的全部都是发光效果的情况，解决办法就是在原文字的位置的正后方放一个字样相同但是字颜色是白色的元素，给这个后面的元素设置发光效果，就可以正常显示出发光效果

<div class="title-box">文字发光</div>
<div class="title-bottom">文字发光</div>

.main_title {
    height: 100px;
    width: 100%;
    font-size: 2.4rem;
    line-height: 60px;
    z-index: 10;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    position: relative;
    .title-box {
      position: relative;
      z-index: 99;
      background: linear-gradient(to bottom, #fff, #fff, #8feaee, #81cee6);
      -webkit-background-clip: text;
      color: transparent;
      font-family: youshehei;
      font-weight: 500;
      letter-spacing: 2px;
    }
    .title-bottom {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 80;
      color: #fff;
      font-family: youshehei;
      font-weight: 500;
      letter-spacing: 2px;
      text-shadow: 0 0 20px #055ca6, 0 0 20px #055ca6, 0 0 20px #055ca6,
        0 0 20px #055ca6, 0 0 20px #055ca6;
    }
}

8、字体倾斜

font-style: italic;

9、字体拉伸的一种方法

这个对span不起效果，对div起效果

transform: scale(0.7, 1.1);

10、CSS字体类别

(1)黑体：SimHei

11、隐藏滚动条

.main-box::-webkit-scrollbar {
   display: none; /* Chrome Safari */
}

12、滑动动画

.leftpanel {
    animation: leftPanel 0.5s linear;
}

@keyframes leftPanel {
    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

.rightpanel {
    animation: rightPanel 0.5s linear;
}

@keyframes rightPanel {
    0% {
        transform: translateX(100%);
    }

    50% {
        transform: translateX(50%);
    }

    100% {
        transform: translateX(0);
    }
}

13、内边框发光

box-shadow: 0px 1px 5px #398ab6 inset,0px 1px 5px #398ab6 inset,0px 2px 8px #398ab6 inset;

14、背景渐变

background-image: linear-gradient(45deg, #0eeaa8, #19cbca, #19b6e6);

15、禁止文字选中

user-select:none;

16、虚线的画法

 		height: 3px;
        background: linear-gradient(
          to left,
          transparent 0%,
          transparent 50%,
          #de0101 50%,
          #de0101 100%
        );
        background-size: 0.9rem 3px;
        background-repeat: repeat-x;
        width: 5rem;