placeholder

input::placeholder{}
uni-app
<input  placeholder-class="placeholder-class" type="text" v-model="val" placeholder="请输入">

虚线

    width: 1px;
    background-image: linear-gradient(to bottom, #4D5358 0%, #4D5358 80%, transparent 50%);
    background-size: 100% 4px;
    background-repeat: repeat-y;

渐变背景

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;"

不换行

white-space:nowrap

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%);
}

video

object-fit: fill; 上下有边距

autoplay  自动播放
muted。 静音
loop。 循环

首行缩紧

text-indent:2em