css小技巧

Posted 2020-12-17 banbaibanzi

1.用css伪元素勾勒出关闭按钮

.box {
  position: relative;
  padding: 10px;
  width: 200px;
  height: 100px;
  border: 1px solid #e1e1e1;
  &:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    overflow: hidden;
  }
  .close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    float: right;
    width: 26px;
    height: 26px;
    cursor: pointer;
    &::before,
    &::after {
      position: absolute;
      content: "";
      top: 50%;
      left: 50%;
      height: 20px;
      margin-left: -1px;
      margin-top: -10px;
      border-left: 2px solid #999c9f;
    }
    &::before {
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    }
    &::after {
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
    }
  }
}

2.mixin用法

　　引用示例： @include webkit(transition, all 0.3s ease 0s); 

/* 属性前缀 */
@mixin webkit($type, $value) {
  -webkit-#{$type}: $value;
  -moz-#{$type}: $value;
  -ms-#{$type}: $value;
  -o-#{$type}: $value;
  #{$type}: $value;
}

/* 属性后缀 */
@mixin webkitA($type, $value) {
  #{$type}: -webkit-#{$value};
  #{$type}: -moz-#{$value};
  #{$type}: -ms-#{$value};
  #{$type}: -o-#{$value};
  #{$type}: $value;
}

3.extend用法

　　类似mixin，引用示例： @extend %clearfix; 

/* 清除浮动 */
%clearfix {
  &:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    overflow: hidden;
  }
  *height: 1%;
}