几个css黑科技

Posted 2020-09-14

这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。

 

.box {
  border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}

斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，各个数字就分别代表四个不一样的方向。

input {
    outline-offset: 4px ;
}

　　调节该属性值的大小你就可以看到outline的距离变化了。

 

ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}
/** Or Safari Way **/
ol li:nth-child(-n+14):nth-child(n+7) {
  background: lightpink;
}

　　上面的这种写法其实就可以达到选中ol下面的第七到第十四个li元素。