使用transform描绘1px边框

  1. // 先设置高宽为2倍 然后transform进行变换 使用after实现 对原容器无影响
  2. .thin {
  3.     position: relative;
  4.     &::after {
  5.         position: absolute;
  6.         left: 0;
  7.         top: 0;
  8.         border: 1px solid #f66;
  9.         width: 200%;
  10.         height: 200%;
  11.         content: "";
  12.         transform: scale(.5);
  13.         transform-origin: left top;
  14.     }
  15. }

使用attr()抓取data-*

  1. <a class="tips" href="https://www.baidu.com" data-msg="Hello World">
  2. // 在css的content中可以查询到html中的data-msg
  3.     &::after {
  4.         position: absolute;
  5.         left: 0;
  6.         top: 0;
  7.         border-radius: 5px;
  8.         width: 100%;
  9.         height: 100%;
  10.         background-color: rgba(#000, .5);
  11.         opacity: 0;
  12.         text-align: center;
  13.         font-size: 12px;
  14.         content: attr(data-msg);
  15.         transition: all 300ms;
  16.     }

使用pointer-events禁用事件触发

// 该属性可以使点击无效 某些特殊时刻可能可以使用
.disabled-trigger {
    padding: 0 20px;
    border-radius: 10px;
    height: 40px;
    background-color: #66f;
    pointer-events: none;
    line-height: 40px;
    color: #fff;
}

foucs-within妙用