CSS 较少的CSS3

Posted 2021-05-23

.rotate(@deg: 7deg){
  -webkit-transform: rotate(@deg);
  -moz-transform: rotate(@deg);
  -o-transform: rotate(@deg);
  transform: rotate(@deg);
}
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
  @val: @x @y @blur rgba(0, 0, 0, @alpha);
  box-shadow: @val;
  -webkit-box-shadow: @val;
  -moz-box-shadow: @val;
}
.transition(@property, @duration, @effect){
  @val: @property @duration @effect;
  -webkit-transition: @val;
  -moz-transition: @val;
  -o-transition: @val;
  transition: @val;
}
.scale(@mod){
  -moz-transform: scale(@mod);
  -webkit-transform: scale(@mod);
  -o-transform: scale(@mod);
  transform: scale(@mod);
}
.rotate-and-scale(@deg,@mod){
  -moz-transform: scale(@mod) rotate(@deg);
  -webkit-transform: scale(@mod) rotate(@deg);
  -o-transform: scale(@mod) rotate(@deg);
  transform: scale(@mod) rotate(@deg);
}
.border-radius(@rad){
  -moz-border-radius: @rad;
  -webkit-border-radius: @rad;
  border-radius: @rad;
}