CSS小技巧

1、CSS实现文字两端对齐:
需求：

div .input-label{
   margin:10px 0; 
   width:100px;
   border:1px solid red;
   text-align-last: justify;
}

2、-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，你还可以创建镂空的字体！

 1  {-webkit-text-stroke:2px blue}
 2  {-webkit-text-stroke:1px transparent}
 3  {color:transparent;-webkit-text-stroke:4px red;}

3、黑白图像

http://www.cssreflex.com/css-generators/filter/

/*控制图片黑白，filter(滤镜)属性*/
img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

4、垂直居中

http://lotabout.me/2016/CSS-vertical-center/

/*控制图片黑白，filter(滤镜)属性*/
.outer{
	width: 300px;
	height: 400px;
	background: red;
	display: table;
}
.outer > div{
	display: table-cell;
	vertical-align: middle;
}
.outer > div > .inner{
	width: 200px;
	height: 100px;
	background: #aaa;
	margin:0px auto;
    //换行
    overflow-wrap: break-word;
    word-wrap: break-word; 
}

5、css切换背景色

/*Internet Explorer 9 以及更早的版本不支持 animation-name 属性。*/
#animation-button1 {
  width:200px;
  height:200px;
  background:#c00;
  -webkit-animation-duration:2000ms;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -webkit-animation-name:animate02;
  -moz-animation-duration:2000ms;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
  -moz-animation-name:animate02;
}
@-webkit-keyframes animate02 {
 0%     { background:#c00; }
 50%    { background:#0c0; }
 100%   { background:#c00; }
}
@-moz-keyframes animate02 {
 0%     { background:#c00; }
 50%    { background:#0c0; }
 100%   { background:#c00; }
}

6、css切换背景图片

/*Internet Explorer 9 以及更早的版本不支持 animation-name 属性。*/
#animation-button2 {
  width:200px;
  height:200px;
  background-image:url('/wp-content/uploads/2018/01/u12729877743296262883fm27gp0-300x181.jpg');
  background-size: cover;
  -webkit-animation-duration:5000ms;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -webkit-animation-name:animate03;
  -moz-animation-duration:2000ms;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:linear;
  -moz-animation-name:animate03;
}
@-webkit-keyframes animate03 {
 0%     { background-image:url('/wp-content/uploads/2018/01/8694a4c27d1ed21b7e1e46e6ab6eddc450da3fd9.jpg'); }
 50%    { background-image:url('/wp-content/uploads/2018/01/u12729877743296262883fm27gp0-300x181.jpg'); }
 100%   { background-image:url('/wp-content/uploads/2018/01/8694a4c27d1ed21b7e1e46e6ab6eddc450da3fd9.jpg');  }
}
@-moz-keyframes animate03 {
 0%     { background-image:url('/wp-content/uploads/2018/01/8694a4c27d1ed21b7e1e46e6ab6eddc450da3fd9.jpg'); }
 50%    { background-image:url('/wp-content/uploads/2018/01/u12729877743296262883fm27gp0-300x181.jpg'); }
 100%   { background-image:url('/wp-content/uploads/2018/01/8694a4c27d1ed21b7e1e46e6ab6eddc450da3fd9.jpg');  }
}

7、破裂的图片

.broken-pic{
  position: relative;

}
img.broken-pic::after{
  content:  "^_^";
  position: absolute; 
  text-align: center;
  vertical-align: middle;
  z-index: 1;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: #ccc;
  /*垂直居中*/
  display: flex;
  justify-content: center;
  align-items: center;
}

8、表格的行与列同时高亮

/*实现该效果时，外层div不能设置背景色*/
.table-hover-cus { 
  overflow: hidden; 
} 
.table-hover-cus td { 
  position: relative; 
}
.table-hover-cus tr:hover { 
  background-color: #ccc; 
} 
.table-hover-cus td:hover::after { 
  content: ""; 
  position: absolute; 
  width: 100%; 
  height: 10000px; 
  left: 0; 
  top: -5000px; 
  background-color: #ccc;  
  z-index: -1;
}

注：使用该技巧时，表格的上级div不能有背景色

9、块高不统一

@media screen and (min-width: 1200px) {
  .block-height{
    display: flex; 
    flex-wrap: wrap;
    background: #efefef;
    margin-bottom: 20px;
  }
}