1、一个可以让任何元素都垂直居中的黑魔法
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
2、选择元素1-n个元素
example:
/* 选择第 1 至第 3 个元素并显示出来 */
li:nth-child(-n+3) {
display: block;
}
/*配合not()
.test-nth-child ul li:not(:nth-child(-n+2)){
border-bottom: 1px solid #e3e3e3;
}
3、svg在所有分辨率下都可以良好缩放，请丢掉png、jpg
4、表格等宽
.calendar {
table-layout: fixed;
}
5、shape-outside 相对其他人你是圆的
6、background角向渐变conic-gradient(red,yellow,blue)
7、背景虚化 filter:blur(2px)
8、animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
9、修改浏览器默认滚动条
/*滚动条 start*/
::-webkit-scrollbar {
width: 1px;
height: 4px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background: #fff ;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 3px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
// background-color:rgba(7, 170, 247, 0.7);
background-color: transparent;
}
::-webkit-scrollbar-thumb:hover {
border-radius: 3px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:rgba(7, 170, 247, 1);
}
网友评论