常用css效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/smalCat/article/details/83477453

经过一段时间的前端工作，我发现，有些时候会有大量的重复css效果项目中出现，这里就特别为自己准备了一个css常用样式记录，以此来避免自己重复的去写一些css效果样式

文本省略…

p {
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap; <**文本不换行**>
}

文本换行

p {
	word-break:normal;
	white-space:pre-warp;
	word-wrapL:break-word;
}

文本多行省略…

默认编译的时候，会过滤 -webkit-box-orient: vertical;

p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 这里设置行数
	 /* autoprefixer: off */ // 关闭编译
	  -webkit-box-orient: vertical; // 跳过编译
	  /* autoprefixer: on */ // 开启编译

}

border三角形

&:after {
  display: block;
  content: '';
  width: 0;
  height:0;
  position: absolute;
  left: 26px;
  top: -20px;
  border:10px solid #f00283;
  border-color: transparent transparent #fff transparent;
}
&:before {
  display: block;
  content: '';
  width: 0;
  height:0;
  position: absolute;
  left: 24px;
  top: -24px;
  border:12px solid #f00283;
  border-color: transparent transparent #e0e0e0 transparent;
}

border 下滑线展开

&:before {
  display: block;
  width: 0;
  height: 0;
  content: '';
  transition: all .5s;
  border-bottom: 4px solid #333740;
  position: absolute;
  bottom: -4px;
  left: 50%;
  right: 52%;
}
&:hover {
  transform: translateY(-10px);
  box-shadow: 10px -10px 7px 0px rgba(0, 0, 0, 0.3);
  &:before {
    left: 0;
    width: 100%;
    border-bottom: 4px solid #ffc527;
  }
}

form表单的placehold样式

::-webkit-input-placeholder{}    /* 使用webkit内核的浏览器 */
:-moz-placeholder{}                  /* Firefox版本4-18 */
::-moz-placeholder{}                  /* Firefox版本19+ */
:-ms-input-placeholder{}           /* IE浏览器 */