css不常用,CSS不常用 却舒适-持续整理

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);

}