多行显示省略号

  1. overflow : hidden;
  2. text-overflow: ellipsis;
  3. display: -webkit-box;
  4. -webkit-line-clamp: 2;
  5. -webkit-box-orient: vertical;

单行显示省略号

overflow:hidden; 
text-overflow:ellipsis;
white-space:nowrap;

文字两端对齐

text-align-last: justify;

修改input placeholder的颜色

.m-search input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.65);
}
.m-search input:-moz-placeholder {
  color: rgba(255, 255, 255, 0.65);
}
.m-search input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.65);
}

黑白图像

下面的 CSS 代码能够把彩色图像转变成黑白风格：

img.desaturate {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}

文本渐变

文本渐变效果很流行，使用 CSS3 能够很简单就实现：

.header{
  background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent; 
}

模糊文本

简单但很漂亮的文本模糊效果，简单又好看！

.blur {
  color: transparent;
  text-shadow:005px rgba(0,0,0,0.5);
}