浏览器私有属性——css前缀

.box_round {
  -webkit-border-radius: 12px; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
          border-radius: 12px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  background-clip: padding-box; /* Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+ */
}
.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: 0px 0px 4px 0px #ffffff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Chrome, Safari 4+ */
  background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background-image:    -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
  background-image:      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
  background-image:         linear-gradient(to bottom, #444444, #999999); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

.box_rgba {
  background-color: transparent;
  background-color: rgba(180, 180, 144, 0.6);  /* Chrome, Firefox 3+, IE 9+, Opera 10.10+, Safari 3+ */
}

.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Chrome, Safari 3.1+ */
     -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(7.5deg);  /* IE 9 */
       -o-transform: rotate(7.5deg);  /* Opera 10.50-12.00 */
          transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

.box_scale {
  -webkit-transform: scale(0.8);  /* Chrome, Safari 3.1+ */
     -moz-transform: scale(0.8);  /* Firefox 3.5+ */
      -ms-transform: scale(0.8);  /* IE 9 */
       -o-transform: scale(0.8);  /* Opera 10.50-12.00 */
          transform: scale(0.8);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}



.box_3dtransforms {
  -webkit-perspective: 300px;  /* Chrome 12+, Safari 4+ */
     -moz-perspective: 300px;  /* Firefox 10+ */
      -ms-perspective: 300px;  /* IE 10 */
          perspective: 300px;
  -webkit-transform: rotateY(180deg);  -webkit-transform-style: preserve-3d;
     -moz-transform: rotateY(180deg);     -moz-transform-style: preserve-3d;
      -ms-transform: rotateY(180deg);      -ms-transform-style: preserve-3d;
          transform: rotateY(180deg);          transform-style: preserve-3d;
}


.box_transition {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

.box_textshadow {
  text-shadow: 1px 1px 3px #888; /* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ */
}

.box_opacity {
  opacity: 0.9; /* Android 2.1+, Chrome 4+, Firefox 2+, IE 9+, iOS 3.2+, Opera 9+, Safari 3.1+ */
}

* {
  -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
     -moz-box-sizing: border-box; /* Firefox 1+ */
          box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
}

.box_bgsize {
  -webkit-background-size: 100% 100%; /* Safari 3-4 */
          background-size: 100% 100%; /* Chrome, Firefox 4+, IE 9+, Opera, Safari 5+ */
}

.box_columns {
  -webkit-column-count: 2;  -webkit-column-gap: 15px; /* Chrome, Safari 3 */
     -moz-column-count: 2;     -moz-column-gap: 15px; /* Firefox 3.5+ */
          column-count: 2;          column-gap: 15px; /* Opera 11+ */
}

.box_animation:hover {
  -webkit-animation: myanim 5s infinite; /* Chrome, Safari 5+ */
     -moz-animation: myanim 5s infinite; /* Firefox 5-15 */
       -o-animation: myanim 5s infinite; /* Opera 12.00 */
          animation: myanim 5s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
}

@-webkit-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-moz-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-o-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}



.box_tabsize {
  -moz-tab-size: 2; /* Firefox 4+ */
    -o-tab-size: 2; /* Opera 10.60+ */
       tab-size: 2;
}