CSS

渐变背景

background: linear-gradient(direction,color-stop1,color-stop2,...);

第一个参数是方向,后面的是颜色值
direction:
     类型1:to right        //向右渐变,除此之外还有上下左右...
     类型2:to right top    //向右上渐变....[同理]
     类型3:45deg           //直接给个角度

animation动画

<style>
        // 设置动画
        @keyframes move {
            0% {
                margin-top: 0;
            }

           ......

            100% {
                margin-top: 100;
            }
        }
        .box {
            animation: move 3s infinite;    //使用,infinite是循环  linear 均速
        }
    </style>

transition动画:
   transition-property   监听某个属性
   transition-duration    时间

浮动

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden; 
}

文本域

滚动条隐藏:
   overflow-x: hidden;
   overflow-y: hidden;

右下角斜线隐藏:
   resize: none

选中样式:
  :focus {  border: none;  outline: none;  }

超出折叠显示三点

单行:   
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: keep-all;
    white-space: nowrap;
    text-overflow: ellipsis;

多行:

word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

在Less 中 -webkit-xxx会自动帮你删除,需要关闭

  /*! autoprefixer: off */
   -webkit-box-orient: vertical;
  /*! autoprefixer: on */

禁止文本被选中

 PC
 -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;

移动端
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;


ontouchstart="return false;"

flex

justify-content:space-between  //元素左右分布

文字换行参差不齐

  text-align: justify;
  text-justify: newspaper;
  word-break: break-all;

html 文本数据进行换行显示

这种情况下怎么换行

css:
white-space: [pre-line || pre-wrap];

pre-wrap:连续的空白符会被保留。在遇到换行符或者< br >元素,或者需要为了填充「行框盒子(line boxes)」时才会换行。

pre-line连续的空白符会被合并。在遇到换行符或者< br >元素,或者需要为了填充「行框盒子(line boxes)」时会换行。
js:

      let arr = content.split("");
      return arr.map((item) => {
        return item === "\n" ? "<br>" : item
      }).join("")
背景模糊,高斯模糊,毛玻璃
.overlayClass {
  background: hsla(0, 0%, 100%, 0.25) border-box;
}
.overlayClass::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -30px;
  z-index: -1;
  backdrop-filter: blur(5px) brightness(50%);
}