outline-offset（负值）实现加号
能否用纯css实现加号，在不用伪类的情况下。
div {
width: 200px; height: 200px;
outline: 20px solid #000;
outline-offset: -118px;
}
image.png
640.gif
注意事项：
- 容器得是个正方形
- outline 边框本身的宽度不能太小
- 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怎么办，分别写在父子元素即可。
