css中神奇的负数

outline-offset（负值）实现加号

能否用纯css实现加号，在不用伪类的情况下。

div {
    width: 200px; height: 200px;
    outline: 20px solid #000;
    outline-offset: -118px;
}

image.png 640.gif

注意事项：

1. 容器得是个正方形
2. outline 边框本身的宽度不能太小
3. outline-offset 负值 x 的取值范围为: -(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半 + outline宽度)

margin(负值)实现隐藏列表顶部/底部/左边/右边分割线

.father{
  overflow:hidden;
}
.son{
  margin-left:-1px;
  border-left:1px solid #ccc;
}

box-shadow(负值)实现单侧投影

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow: -5px 0px 5px -5px #888888; //左
box-shadow: 5px 0px 5px -5px #888888; //右
box-shadow: 0px 5px 5px -5px #888888; //下
box-shadow: 0px -5px 5px -5px #888888; //上

transform: scale(-1) 实现翻转

效果等于 transform: rotate(180deg)

animation-delay(负值) 实现动画立即实行

开始的位置是其动画阶段中的一个阶段。
animation: rotate 3s infinite -2s linear;

margin(负值实现多栏等高)

.g-left {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

.g-right {
  ...
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}
.father{
  overflow:hidden;
}

magrin(负值)有间距的列表

{  
  .container{
    margin-right:-20px;
  }
  .cards{
    margin-right:20px;
  }
}

项目问题总结

部分机型带圆角的border显示不全问题：
用box-shadow解决，关键点border-radius对box-shadow生效。
如果既需要box-shadow有需要border怎么办，分别写在父子元素即可。