經過一段時間的前端工作，我發現，有些時候會有大量的重複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瀏覽器 */