CSS样式调整

button按钮

button {
    outline: none; //去掉点击后的蓝色边框
}

el-select 选择器 (需设置 :popper-append-to-body="false")

  ::v-deep .el-input--medium .el-input__inner {
    color: #ffffff;
    background: rgba(11, 24, 39, 0.8);
    border-color: transparent;
  }
  ::v-deep .el-scrollbar {
    color: #ffffff;
    border-color: transparent;
    background: rgba(11, 24, 39, 0.9);
  }
  ::v-deep .el-select-dropdown {
    color: #ffffff;
    border-color: transparent;
    background: transparent;
  }
  ::v-deep .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: rgba(17, 37, 61, 1);
    color: #fff;
  }
  ::v-deep .el-select-dropdown__item.selected {
    background: rgba(17, 37, 61, 1);
    color: rgba(0, 145, 255, 1);
  }
  ::v-deep .el-select .el-input .el-select__caret {
    color: #fff;
  }

文本强制一行显示，多余的显示省略号

<div id="title">这是一段长长的文字</div>
#title{
    overflow:hidden;  //超出部分隐藏
    text-overflow:ellipsis;  //超出部分显示...
    white-space:nowrap;  //文本强制一行显示    
}

css文字渐变色

<div class="font-style">唐伯虎点秋香</div>
<style>
.font-style {
     background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent
}
</style>

取消css默认样式 

CSS 高度和宽度值

height 和 width 属性可设置如下值：

• auto - 默认。浏览器计算高度和宽度。
• length - 以 px、cm 等定义高度/宽度。
• % - 以包含块的百分比定义高度/宽度。
• initial - 将高度/宽度设置为默认值。
• inherit - 从其父值继承高度/宽度。

滚动条样式修改

修改滚动条样式，利用伪元素-webkit-scrollbar。

::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome、苹果Safari)。

滚动条组成：

• ::-webkit-scrollbar 滚动条整体部分，可以设置宽度等
• ::-webkit-scrollbar-thumb 滚动条里面的滑块
• ::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击以微调滑块的位置
• ::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
• ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分
• ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时的交汇处
• ::-webkit-resizer 某些元素的corner部分(如textarea的可拖动按钮)

 <ul class="result">
    <li>章三</li>
    <li>章三</li>
    <li>章三</li>
    <li>章三</li>
    <li>章三</li>
  </ul>

.result {
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 20px;
}
.result::-webkit-scrollbar-thumb  {
  background: rgba(255, 255, 255,0.4);
}

文字提示

<!--i标签可以替换为其它标签，title为需要显示的文本信息-->
<i class="fa fa-info-circle" title="文本信息"></i>